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{
 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 /*#sendmail{
 697     background-image:url(images/icon-mail.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 698 }
 699 #sendmail.ui-state-hover {
 700     background-image:url(images/icon-mail.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 701 }*/
 702
 703 #recup_mailing {
 704     position: absolute;
 705     right: .5em;
 706 }
 707
 708 h1 #sendmail {
 709     display: inline-block;
 710     height: 25px;
 711     width: 35px;
 712     position: absolute;
 713     top:.1em;
 714     right: .5em;
 715     overflow: hidden;
 716     text-indent: 50px;
 717     padding:0!important;
 718 }
 719
 720 h1 #sendmail .ui-button-text {
 721     display: none;
 722 }
 723
 724 #backhome {
 725     background:url(images/home.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 726 }
 727 #backhome.ui-state-hover {
 728     background-image:url(images/home.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 729 }
 730
 731 #logout_10 i {
 732     color: rgba(255, 0, 0, 0.6);
 733 }
 734
 735 #logout {
 736     background-image:url(images/icon-quit.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 737 }
 738 #logout.ui-state-hover {
 739     background-image:url(images/icon-quit.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 740 }
 741
 742 #btnadd, #btnadd_small, .btnadd_small {
 743     background-image:url(images/icon-add.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png")!important;
 744 }
 745 #btnadd.ui-state-hover, #btnadd_small.ui-state-hover, .btnadd_small.ui-state-hover {
 746    background-image:url(images/icon-add.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png")!important;
 747 }
 748 .btnremove_small {
 749     background-image:url(images/delete.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png")!important;
 750     padding-left: 2em!important;
 751 }
 752 input.button.btnremove_small, input.button.btnadd_small {
 753     padding-left: 2em!important;
 754 }
 755 .btnremove_small.ui-state-hover{
 756    background-image:url(images/delete.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png")!important;
 757 }
 758
 759 #btninfo_small {
 760     background-image:url(images/icon-info.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 761 }
 762 #btninfo_small.ui-state-hover{
 763    background-image:url(images/icon-info.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 764 }
 765
 766 .tab-button, #btnadd_small, #btninfo_small {
 767     position: absolute!important; /* used along with .button */
 768     right: .5em;
 769 }
 770
 771 .ui-tabs .tab-button , #group .tab-button{
 772     top: .5em;
 773 }
 774
 775 legend .tab-button {
 776     right: 2.5em;
 777 }
 778
 779 #btncancel {
 780     background-image:url(images/icon-cancel.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 781 }
 782 #btncancel.ui-state-hover {
 783     background-image:url(images/icon-cancel.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 784 }
 785
 786 #btnvalid {
 787     background-image:url(images/icon-valid.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 788 }
 789 #btnvalid.ui-state-hover {
 790     background-image:url(images/icon-valid.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 791 }
 792
 793 #btnback {
 794     background-image:url(images/prev.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 795 }
 796 #btnback.ui-state-hover {
 797     background-image:url(images/prev.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 798 }
 799
 800 #btnsend {
 801     background-image:url(images/icon-mail-send.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 802 }
 803 #btnsend.ui-state-hover {
 804     background-image:url(images/icon-mail-send.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 805 }
 806
 807 #btnattach {
 808     margin-bottom: .5em;
 809 }
 810
 811 #preferences {
 812     background-image:url(images/icon-prefs.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 813 }
 814 #preferences.ui-state-hover {
 815     background-image:url(images/icon-prefs.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 816 }
 817
 818 #installpage input[type="submit"] {
 819     background-image:url(images/next.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 820     padding-left: 0.4em!important;
 821     padding-right: 2em!important;
 822     background-position: 95% 50%, 50% 50%!important;
 823     background-repeat: no-repeat, repeat!important;
 824 }
 825 #installpage input[type="submit"]:hover {
 826     background-image:url(images/next.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 827 }
 828
 829 .bigbutton, #btn_membercard, #btn_contrib {
 830     padding-top:30px!important;
 831     padding-left: 0!important;
 832     display: block;
 833     text-align: center;
 834 }
 835 .bigbutton i {
 836     display: block;
 837     width: 100%;
 838     position:absolute;
 839     top: .2em;
 840     left: 0;
 841 }
 842 #btn_membercard {
 843     background-image:url(images/member_card.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 844 }
 845 #btn_membercard.ui-state-hover {
 846     background-image: url(images/member_card.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 847 }
 848
 849 #btn_contrib {
 850     background-image:url(images/contribution.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 851 }
 852 #btn_contrib.ui-state-hover {
 853     background-image: url(images/contribution.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 854 }
 855
 856 #btntools {
 857     background-image: url(images/icon-tool.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 858 }
 859 #btntools.ui-state-hover {
 860     background-image: url(images/icon-tool.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 861 }
 862
 863 #btnregister {
 864     background-image: url(images/icon-identity.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 865 }
 866 #btnregister.ui-state-hover {
 867     background-image: url(images/icon-identity.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 868 }
 869
 870 #btntelemetry {
 871     background-image: url(images/icon-telemetry.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 872 }
 873 #btntelemetry.ui-state-hover {
 874     background-image: url(images/icon-telemetry.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 875 }
 876
 877 .left {
 878     text-align: left!important;
 879 }
 880
 881 .right {
 882     text-align: right!important;
 883 }
 884
 885 .center {
 886     text-align: center!important;
 887 }
 888
 889 .center_table {
 890     margin:0 auto;
 891 }
 892
 893 .cotis-ok {
 894     background-color: #DDFFDD!important;
 895     vertical-align: top;
 896 }
 897
 898 .cotis-never {
 899     background-color: #EEEEEE!important;
 900     vertical-align: top;
 901 }
 902
 903 .cotis-exempt {
 904     background-color: #DDFFDD!important;
 905     vertical-align: top;
 906 }
 907
 908 .cotis-soon {
 909     background-color: #FFE9AB!important;
 910     vertical-align: top;
 911 }
 912
 913 .cotis-late, .transaction-uncomplete {
 914     background-color: #FFDDDD!important;
 915     vertical-align: top;
 916 }
 917
 918 .cotis-lastday {
 919     background-color: #FFDDDD!important;
 920     vertical-align: top;
 921 }
 922
 923 .cotis-normal, .transaction-normal {
 924     background-color: #DDFFDD!important;
 925     vertical-align: top;
 926 }
 927
 928 .cotis-give {
 929     background-color: #FFDDDD!important;
 930     vertical-align: top;
 931 }
 932
 933 #transaction_detail {
 934     margin-bottom: 1em;
 935 }
 936
 937 #transaction_detail caption {
 938     font-weight: bold;
 939     padding:.2em;
 940 }
 941
 942 #transaction_detail thead td {
 943     text-align: center;
 944     font-style: italic;
 945     background-color: transparent;
 946 }
 947
 948 .debuginfos span{
 949     display: block;
 950     font-family: monospace;
 951     font-size:1.1em;
 952 }
 953
 954 /* =/ Main Galette styles */
 955
 956 /* == Groups stuff */
 957 #groups_list {
 958     border-spacing:3em 1em;
 959     min-width: 13em;
 960 }
 961
 962 #groups_tree, #group_infos > div {
 963     margin: .5em;
 964 }
 965
 966 #group_infos{
 967     width: 100%;
 968     margin-left: 1em;
 969     vertical-align: top;
 970 }
 971 /* =/ Groups stuff */
 972
 973 /* == Ajax member selection */
 974 #members_list {
 975     padding-top: 1em;
 976 }
 977
 978 .select_members {
 979     padding-right: 1em;
 980 }
 981 .select_members,
 982 #selected_members,
 983 #selected_groups {
 984     display:table-cell;
 985     vertical-align: top;
 986 }
 987
 988 .select_members.single {
 989     display: block;
 990 }
 991
 992 .select_members th.left {
 993     width:50%;
 994 }
 995
 996 #selected_members header,
 997 #selected_groups header {
 998     padding-top: 0;
 999     -moz-border-radius: 10px 10px 0 0;
1000     -webkit-border-radius: 10px 10px 0 0;
1001     border-radius: 10px 10px 0 0;
1002 }
1003
1004 #selected_members,
1005 #selected_groups {
1006     min-width: 25em!important;
1007     margin-left:.5em!important;
1008     text-align: center;
1009 }
1010
1011 #selected_members ul,
1012 #selected_groups ul {
1013     text-align: left;
1014     list-style-type: none;
1015     cursor: pointer;
1016     overflow: auto;
1017 }
1018
1019 #selected_members ul i,
1020 #selected_groups ul i {
1021     margin-right: .2em;
1022 }
1023
1024 #selected_members ul #none_selected,
1025 #selected_groups ul #none_selected {
1026     cursor: auto;
1027 }
1028
1029 #selected_members .unreachables {
1030     text-decoration: line-through;
1031     color: red;
1032 }
1033
1034 #selected_members h3,
1035 #selected_groups h3 {
1036     margin:0;
1037     font-size: 1em;
1038 }
1039
1040 .texts_legend .back > span {
1041     font-size: .9em;
1042     text-align: right;
1043     display: block;
1044     color:#666;
1045 }
1046
1047 .help {
1048     background:url(images/help.png) 100% 50% no-repeat;
1049     padding-right: 25px;
1050     min-height: 25px;
1051     display: inline-block;
1052 }
1053
1054 /*
1055  * == Public pages
1056  */
1057  .public_page footer{
1058     clear:both;
1059 }
1060
1061 .public_page header {
1062      text-align: center;
1063      margin-top:1em;
1064 }
1065
1066 .public_page table.listing,
1067 .public_page table.infoline,
1068 .public_page body > p {
1069     margin: 0 auto;
1070     width: 95%;
1071 }
1072
1073 .public_page p {
1074     margin: 1em auto .5em;
1075 }
1076
1077 .public_page section {
1078     text-align: center;
1079 }
1080
1081 .public_page table {
1082     margin:1em auto;
1083 }
1084
1085 .public_page form {
1086     text-align: center;
1087 }
1088
1089 .public_page .exemple {
1090     margin-top:0;
1091 }
1092
1093 .public_page #user {
1094     position: absolute;
1095     top:3em;
1096     right:0;
1097     display:inline-block;
1098
1099 }
1100 .public_page #userlink {
1101     color: #666666;
1102     background: url(images/icon-user.png) 7px 50% no-repeat;
1103     padding: .2em .2em .2em 25px;
1104     display: inline-block;
1105 }
1106
1107 .public_page #user a:hover {
1108     color: #eea423;
1109 }
1110
1111 .public_page #logout_10 {
1112     margin: 0 .5em .2em;
1113 }
1114
1115 .public_page #plang_selector {
1116     position: absolute;
1117     right: .5em;
1118     top: .5em;
1119 }
1120
1121 /* =/ Public pages */
1122
1123 /*
1124  * == Plugins installation
1125  */
1126
1127 #plugin_install {
1128     background: #DDDDFF;
1129     border-radius: 6px;
1130     padding: 1em;
1131 }
1132
1133 #plugin_install footer {
1134     margin:.5em 0 0;
1135     padding: .1em .5em;
1136     text-align: center;
1137     font-size: 0.85em;
1138     border: 1px rgba(255, 255, 255, 0.5) solid;
1139     -moz-border-radius: 10px 10px 10px 10px;
1140     -webkit-border-radius: 10px 10px 10px 10px;
1141     border-radius: 10px 10px 10px 10px;
1142 }
1143
1144 #plugin_install footer p{
1145     margin:.5em .5em 0;
1146     color: #666666;
1147     font-size: 1.2em;
1148     font-weight:bold;
1149 }
1150
1151 #plugin_install footer ol{
1152     color:#999;
1153     padding:0;
1154     margin:0 0.5em 0.5em 0.5em;
1155     list-style-type:none;
1156 }
1157 #plugin_install footer li{
1158     line-height:1.7em;
1159     display:inline;
1160     margin: .1em;
1161     padding: 0;
1162 }
1163
1164 #plugin_install footer .current{
1165     color:black;
1166     font-weight:bold;
1167 }
1168
1169 #btn_box{
1170     text-align: right;
1171     margin:0;
1172 }
1173
1174 #plugin_install > div {
1175     padding: .2em;
1176     background-color: white;
1177     border-radius: 6px;
1178 }
1179
1180 #plugin_install h2{
1181     margin: .5em 0 0;
1182     font-size:1.2em;
1183     text-align: center;
1184 }
1185
1186 #installation_mode {
1187     display: table;
1188     table-layout: fixed;
1189     border-spacing: .5em;
1190     border-collapse: separate;
1191 }
1192
1193 .installation_mode {
1194     display: table-cell;
1195     width: 10%;
1196     border-radius: 6px;
1197     -moz-box-shadow: 0px 1px 2px #555;
1198     -webkitbox-shadow: 0px 1px 2px #555;
1199     box-shadow: 0px 1px 2px #555;
1200 }
1201
1202 #plugin_install h3 {
1203     font-size: 1.1em;
1204     margin: .2em 0 0;
1205     color: #666666;
1206     text-align: center;
1207 }
1208
1209 #plugin_install ul {
1210     margin: 0 auto .7em!important;
1211 }
1212
1213 ul.leaders {
1214     display: block!important;
1215     max-width: 40em;
1216     padding: 0;
1217     overflow-x: hidden;
1218     list-style: none;
1219     overflow: hidden;
1220 }
1221
1222 ul.leaders li {
1223     position: relative;
1224 }
1225
1226 ul.leaders li:before {
1227     float: left;
1228     width: 0;
1229     white-space: nowrap;
1230     content:
1231  ". . . . . . . . . . . . . . . . . . . . "
1232  ". . . . . . . . . . . . . . . . . . . . "
1233  ". . . . . . . . . . . . . . . . . . . . "
1234  ". . . . . . . . . . . . . . . . . . . . "
1235 }
1236
1237 ul.leaders span:first-child {
1238     padding-right: 0.33em;
1239     background: white
1240 }
1241
1242 ul.leaders span + span {
1243     padding-left: 0.33em;
1244     position: absolute;
1245     background: white;
1246     right: 0;
1247 }
1248
1249 /* =/ Plugins installation */
1250
1251 /*
1252  * == End
1253  */
1254
1255 /** OLD STYLES */
1256 input.submit
1257 {
1258     display:block;
1259     background-color: #FBFBFB;
1260     font-weight: bold;
1261     color: #666666;
1262     border: 1px solid #BBBBBB;
1263     margin: 0.5em auto 0 auto;
1264 }
1265
1266 input.submit:hover
1267 {
1268     color: #FF0000;
1269 }
1270
1271 .pagelink {
1272     font-weight: bold;
1273 }
1274
1275 #titre, #plugin_install h1{
1276     font-size:1.3em;
1277     line-height:1.7em;
1278     background-color:#DDDDFF;
1279     margin:0 1em 0em 1em;
1280     color: #666;
1281     text-align:center;
1282     position:relative;
1283     -moz-border-radius: 10px 10px 10px 10px;
1284     -webkit-border-radius: 10px 10px 10px 10px;
1285     border-radius: 10px 10px 10px 10px;
1286 }
1287 .self_subscribe{
1288     margin-top:0.5em!important;
1289 }
1290
1291 .titre {
1292     font-size:1.3em;
1293     text-align: center;
1294     font-weight: bold;
1295     border-style: solid;
1296     border-width: 1px;
1297     background-color: #FBFBFB;
1298     border-color: #BBBBBB;
1299     margin-top: 0.5em;
1300     margin-bottom: 1em;
1301     color: #000000;
1302     width: 100%;
1303 }
1304
1305 .soustitre {
1306     font-size:1.2em;
1307     text-align: left;
1308     font-weight: bold;
1309     border-style: solid;
1310     border-width: 1px;
1311     background-color: #FBFBFB;
1312     border-color: #BBBBBB;
1313     margin-top: 1em;
1314     margin-bottom: 0.5em;
1315     color: #000000;
1316     width: 100%;
1317 }
1318
1319 table.listing th, li.listing {
1320     background: #FFB619 url(jquery-ui/images/ui-bg_glass_65_ffb619_1x400.png) repeat-x scroll 50% 50%;
1321     color: #212121;
1322     white-space: nowrap;
1323     font-weight: normal;
1324     font-weight: bold;
1325     margin-top: .3em;
1326     padding: .1em .2em;
1327     vertical-align: middle;
1328 }
1329
1330 table.listing .row-title {
1331     display: none;
1332 }
1333
1334 .bgfree {
1335     background: none!important;
1336 }
1337
1338 .id_row,
1339 th.small_head{
1340     width:1%;
1341 }
1342 .username_row{
1343     width:25%;
1344 }
1345 .actions_row{
1346     width:1%;
1347     white-space: nowrap;
1348 }
1349
1350 .date_row{
1351     width:6em;
1352 }
1353
1354 table.listing th a,
1355 a.listing {
1356     color: #212121;
1357     vertical-align: middle;
1358 }
1359
1360 table.listing td {
1361     line-height:1.5em;
1362     margin-top:.3em;
1363     padding:.1em .2em;
1364     vertical-align: middle;
1365 }
1366
1367 table.listing th a:hover,
1368 a.listing:hover {
1369     color: #666!important;
1370 }
1371
1372 .emptylist {
1373     background-color: #EEEEEE;
1374     text-align: center;
1375     font-style: italic;
1376 }
1377
1378 .actif {
1379 }
1380
1381 .inactif, .inactive {
1382     color: #777777;
1383     font-style: italic;
1384 }
1385
1386 .acronyme {
1387     color: #AAAAAA;
1388     font-style: italic;
1389 }
1390
1391 .note {
1392     margin:0;
1393 }
1394
1395 .exemple, .disabled, .disabled a {
1396     color: #999999;
1397 }
1398
1399 #logo {
1400     text-align: center;
1401     font-weight: bold;
1402     margin: 0.5em 0;
1403 }
1404
1405 #main_logo{
1406     text-align: center;
1407     margin-top:0.5em;
1408 }
1409
1410 .nav1 {
1411     width: 13em;
1412     margin-left:0.3em;
1413     border-color: #7777FF;
1414     border-width: 1px;
1415     border-style: solid;
1416     margin-bottom: 0.5em;
1417     padding:0;
1418 }
1419
1420 .nav1 h1 {
1421     margin: 2px;
1422     font-size:1em;
1423     background-color: #CDCDFF;
1424     padding-left: 0.2em;
1425 }
1426
1427 .nav1 ul {
1428     list-style-type: none;
1429     margin: 2px;
1430     padding: 0px;
1431     border: none;
1432 }
1433
1434 .nav1 li {
1435     background-color: #EEEEEE;
1436     margin-bottom: 2px;
1437     padding-left: 2px;
1438 }
1439
1440 #logout {
1441     text-align: center;
1442     margin:0 0 .7em;
1443 }
1444
1445 #legende {
1446     border: 1px #7777FF solid;
1447     width:40%;
1448     margin-left:0.3em;
1449     margin-bottom:0.7em;
1450 }
1451
1452 #legende table {
1453     width: 100%;
1454 }
1455
1456 #legende h1 {
1457     margin: 2px;
1458     font-size:1em;
1459     background-color: #CDCDFF;
1460     padding-left: 0.2em;
1461     text-align: left;
1462 }
1463
1464 #legende th{
1465     text-align:center;
1466     width:18px;
1467 }
1468 #legende td, #legende th {
1469     padding-left: 2px;
1470 }
1471
1472 .ui-dialog > #legende {
1473     border:none;
1474     margin:0;
1475 }
1476
1477 .color-sample {
1478     border-color: #AAAAAA;
1479     border-width: 1px;
1480     border-style: solid;
1481 }
1482
1483 #content {
1484     margin-left:17em;
1485     margin-top: 10px;
1486     padding: 0.5em;
1487     position: relative;
1488     min-height: 100vh;
1489 }
1490
1491 #full_content {
1492     padding:0 0.5em;
1493 }
1494
1495 #listing,
1496 table.listing {
1497     width: 100%;
1498 }
1499
1500 #listing.single,
1501 table.listing.single {
1502     display: table;
1503 }
1504
1505 #listfilter form {
1506     margin-bottom: 0px;
1507 }
1508
1509 .infoline{
1510     vertical-align: top;
1511     width: 100%;
1512     margin-bottom: 1em;
1513 }
1514
1515 .infoline td {
1516     vertical-align: bottom;
1517     width: 33%;
1518 }
1519
1520 .infoline ul {
1521     margin: 0px;
1522     list-style-type: none;
1523 }
1524
1525 .infoline2 {
1526     margin-top: 2px;
1527 }
1528
1529 .mailing,
1530 #selected_members,
1531 #selected_groups {
1532     width: 60%;
1533     margin:0 auto;
1534     min-width: 60em;
1535     background-image: url(images/mailing_bg.jpg);
1536     background-repeat: no-repeat;
1537     background-position: center 1.5em;
1538     padding-bottom: .3em;
1539     -moz-border-radius: 10px 10px 0px 0px;
1540     -webkit-border-radius: 10px 10px 0px 0px;
1541     border-radius: 10px 10px 10px 10px;
1542     -moz-box-shadow: 1px 1px 12px #555;
1543     -webkitbox-shadow: 1px 1px 12px #555;
1544     box-shadow: 1px 1px 12px #555;
1545 }
1546
1547 #desktop header,
1548 #news header,
1549 #share header,
1550 .plugin header,
1551 .mailing header,
1552 #selected_members header,
1553 #selected_groups header,
1554 #groups_list header,
1555 #group_infos header {
1556     padding: .2em 0;
1557     text-align: center;
1558     font-weight: bold;
1559     border: 0;
1560 }
1561
1562 .mailing section {
1563     padding-top:1em;
1564 }
1565 .mailing section:first-child {
1566     padding-top:0em;
1567 }
1568
1569 .mailing_write > div,
1570 .mailing_preview,
1571 .mailing_attachments div{
1572     margin:.5em 1em;
1573 }
1574
1575 .mailing_infos header{
1576     -moz-border-radius: 10px 10px 0px 0px;
1577     -webkit-border-radius: 10px 10px 0px 0px;
1578     border-radius: 10px 10px 0px 0px;
1579 }
1580
1581 .mailing_infos p{
1582     width: 50%;
1583     display: table-cell;
1584     padding: .5em;
1585     vertical-align: middle;
1586     text-align: right;
1587 }
1588
1589 .mailing_infos p:nth-child(2){
1590     text-align: left;
1591 }
1592
1593 #mailing_objet, #mailing_corps{
1594     width:99%;
1595 }
1596
1597 .ajax_mailing_preview header {
1598     padding:.2em 0;
1599     font-weight: bold!important;
1600     text-align: center;
1601 }
1602
1603 #mailing_header dt,
1604 #mailing_header dd {
1605     display: inline-block;
1606     padding:0;
1607     margin:0;
1608 }
1609 #mailing_header dt {
1610     font-weight: bold;
1611     width: 18%;
1612 }
1613 #mailing_header dd {
1614     width: 80%;
1615 }
1616
1617 .attached {
1618     background: url(images/attached.png) 0 50% no-repeat;
1619     padding: .2em 0 .2em 16px;
1620     display: inline-block;
1621 }
1622
1623 .membercount {
1624     cursor: pointer;
1625     background: url(images/icon-user.png) 99% 50% no-repeat;
1626     padding-right: 20px;
1627 }
1628
1629 #errorbox, .errorbox {
1630     text-align:center;
1631     color:black;
1632     border : 2px solid #c00;
1633     padding : 0.5em 0.5em 0.5em 40px;
1634     background : white url(images/error.png) no-repeat 5px 50%;
1635     width: 80%;
1636     margin:0 auto 0.8em auto;
1637 }
1638
1639 #errorbox h1 {
1640     font-size:1em;
1641     font-weight: bold;
1642     margin: 0;
1643 }
1644
1645 #errorbox ul {
1646     list-style-type: none;
1647     margin: 2px;
1648     padding: 0px;
1649     border: none;
1650 }
1651
1652 #warningbox, .warningbox {
1653     text-align:center;
1654     color:black;
1655     padding : 0.5em 0.5em 0.5em 40px;
1656     background : white url(images/warning.png) no-repeat 5px 50%;
1657     width: 80%;
1658     margin:0 auto 0.8em auto;
1659     display:block;
1660     border:2px solid #FFB619;
1661 }
1662
1663 #warningbox h1 {
1664     font-size: 1em;
1665     font-weight: bold;
1666     margin: 0;
1667 }
1668
1669 #warningbox ul {
1670     list-style-type: none;
1671     margin: 2px;
1672     padding: 0px;
1673     border: none;
1674 }
1675
1676 #infobox, #successbox, #renewbox {
1677     text-align:center;
1678     color:black;
1679     border : 2px solid #04CC65;
1680     padding : 0.5em 0.5em 0.5em 40px;
1681     background : white url(images/ok.png) no-repeat 5px 50%;
1682     width: 80%;
1683     margin:0 auto 0.8em auto;
1684 }
1685
1686 #renewbox {
1687     width: 40em;
1688     position: absolute;
1689     top: 0;
1690     right: 10px;
1691     background : white url(images/desktop/telemetry.png) no-repeat 5px 50%;
1692     padding-left: 50px;
1693 }
1694
1695 #infobox h1 {
1696     font-size:1em;
1697     font-weight: bold;
1698     margin: 0;
1699 }
1700
1701 #infobox ul,
1702 #successbox ul {
1703     list-style-type: none;
1704     margin: 2px;
1705     padding: 0px;
1706     border: none;
1707 }
1708
1709 #input-table{
1710     margin:0.5em 1em;
1711     background-color:white;
1712 }
1713
1714 #input-table .libelle {
1715     font-size: 11px;
1716     text-align: left;
1717     background-color: #DDDDFF;
1718     font-weight: normal;
1719 }
1720
1721 #input-table .header {
1722     text-align: left;
1723     font-weight: bold;
1724 }
1725
1726 #input-table tr:hover {
1727     background-color: #EEEEEE;
1728 }
1729
1730 #tables_list{
1731     width:25em;
1732     margin-left:auto;
1733     margin-right:auto;
1734 }
1735
1736 #listing td,
1737 table.listing td,
1738 #listing input,
1739 table.listing input{
1740     vertical-align: middle;
1741 }
1742
1743 td img, a img {
1744     vertical-align: middle;
1745     max-width: none;
1746 }
1747
1748 .sql_log {
1749     border:1px dashed;
1750     display:block;
1751     margin:.2em .5em .5em;
1752     padding:.2em .3em;
1753     font-family: monospace;
1754     font-size:1.2em;
1755     background-color: rgba(221,221,255,0.5);
1756 }
1757
1758 .mail_preview {
1759     height: 230px;
1760     vertical-align: top;
1761     padding: 5px;
1762 }
1763
1764 .mailing_write p {
1765     display:block!important;
1766 }
1767
1768 #mail_preview div:nth-child(2) {
1769     max-height: 20em;
1770     overflow: auto;
1771 }
1772
1773 .button-container
1774 {
1775     text-align: center;
1776 }
1777
1778 .bigtable
1779 {
1780     text-align: center;
1781 }
1782 .bigtable table
1783 {
1784     margin-left: auto;
1785     margin-right: auto;
1786     border: 1px solid #BBBBBB;
1787 }
1788 .bigtable th
1789 {
1790     font-weight: normal;
1791     text-align: left;
1792     vertical-align: top;
1793     background-color: #DDDDFF;
1794     padding: 0px 5px 0px 5px;
1795 }
1796 .bigtable td
1797 {
1798     background-color: #EEEEEE;
1799     padding: 0px 5px 0px 5px;
1800     text-align: left;
1801 }
1802 .bigtable .separator
1803 {
1804     padding:.3em 0 .1em;
1805     background-color: #FFFFFF;
1806     font-weight: bold;
1807     text-align: center;
1808 }
1809 .bigtable .subtitle
1810 {
1811     color:#0C0CC0;
1812     padding: 1em 5px 0.5em 5px;
1813     font-weight:bold;
1814     border-top:1px solid;
1815 }
1816
1817 :not(.selectize-input).required{
1818     color:#FF0000;
1819     font-weight:bold;
1820 }
1821
1822 /** Accessibility **/
1823 fieldset{
1824     border: 1px solid #BBBBBB;
1825     margin:0 1em 1em;
1826     text-align:left;
1827     position:relative;
1828     padding:.5em;
1829 }
1830 fieldset.large{
1831     margin:0 1% 1em 1%;
1832     clear:right;
1833 }
1834 fieldset ul{
1835     list-style-type:none;
1836     margin:0;
1837     padding:0;
1838 }
1839 fieldset li{
1840     margin:0.1em 0;
1841     clear:left;
1842 }
1843
1844 legend {
1845     border: 1px solid #BBBBBB;
1846     font-weight:bold;
1847     padding:0.3em;
1848     width:97%;
1849     margin-left:1%;
1850     margin-bottom: 1em;
1851     background-color:white;
1852 }
1853
1854 .cssform, .galette_form { background-color:white; }
1855 .cssform ul, .galette_form ul {
1856     /*display: inline-block;*/
1857     padding:0;
1858 }
1859 .cssform li, .galette_form li {
1860     clear:none;
1861 }
1862 .cssform p, .cssform div.p,
1863 .galette_form p, .galette_form div.p {
1864     clear: left;
1865     margin: 0;
1866     padding: 5px 0;
1867     padding-left: 22em; /*width of left column containing the label elements plus 1*/
1868     border-top: 1px dashed gray;
1869     height: 1%;
1870 }
1871
1872 /* no border on the first 'p' child */
1873 .cssform p:nth-child(2), #addfield p:first-child, .cssform legend+p/*, .cssform div.p:nth-child(2), .cssform div p:nth-child(1)*/
1874 .galette_form p:nth-child(2), .galette_form+p, .galette_form legend+p {
1875     border-top:none;
1876 }
1877 /* If there is a div, the preceding rules does not apply to the correct element :( */
1878 .cssform div p:nth-child(2),
1879 .galette_form div p:nth-child(2) {
1880     border-top:1px dashed gray;
1881 }
1882 /* But w do not whant border on the first element thought :) */
1883 .cssform div p:nth-child(1),
1884 .galette_form div p:nth-child(1) {
1885     border-top:none;
1886 }
1887
1888 .cssform p.exemple {
1889     border: none!important;
1890 }
1891
1892 .cssform p.notform{
1893     padding-left:0;
1894     border:none;
1895     height:auto;
1896 }
1897
1898 .galette_form legend {
1899     border-top-right-radius: 4px;
1900     border-top-left-radius: 4px;
1901     background: url("jquery-ui/images/ui-bg_glass_65_ffb619_1x400.png") repeat-x scroll 50% 50% #FFB619;
1902     border: 1px solid #AAAAAA;
1903     color: #212121;
1904     font-weight: normal;
1905 }
1906
1907 .bline,
1908 .galette_form label {
1909     font-weight: bold;
1910     background-color: #DDDDFF;
1911     padding:0.1em 0.3em;
1912     margin-bottom:1em;
1913     display:block;
1914     vertical-align:top;
1915     padding:3px;
1916 }
1917
1918 th.bline, td.bline{
1919     font-weight: bold;
1920     background-color: #DDDDFF;
1921     padding:0.1em 0.3em;
1922     margin-bottom:0;
1923     display:block;
1924     text-align:left;
1925 }
1926
1927 .cssform .bline, .galette_form label, .galette_form .bline {
1928     vertical-align: middle;
1929     display: inline-block;
1930     margin: 0 0 0 -22em;
1931     width: 19.9em;
1932 }
1933
1934 .galette_form .radios label,
1935 .galette_form label.labelalign {
1936     width: auto;
1937     background: none;
1938     margin: 0;
1939     padding: 0;
1940     font-weight: normal;
1941 }
1942
1943 label.simplelabel {
1944     margin: 0;
1945     display: inline;
1946     width: auto;
1947     vertical-align: baseline;
1948     background: inherit;
1949     font-weight: inherit;
1950 }
1951
1952 .galette_form textarea,
1953 .cssform textarea{
1954     width:90%;
1955     height: 150px;
1956     padding-right: 8px;
1957 }
1958
1959 .cssform .ui-button-text-only .ui-button-text {
1960     padding: .1em 1em;
1961 }
1962
1963 .galette_form img.mdp_img {
1964     vertical-align: top;
1965 }
1966
1967 .logo{
1968     margin:0.3em 0;
1969 }
1970
1971 .menu{
1972     margin:0.7em 0 0 0;
1973     padding:0;
1974     text-align:right;
1975     font-weight:bold;
1976 }
1977 .menu li{
1978     margin:0.5em 0;
1979     list-style-type:none;
1980 }
1981 .menu a{
1982     color: #666666;
1983     padding:0.3em 20px 0.3em 0;
1984 }
1985
1986 .inline{ display:inline!important; }
1987
1988 .nowrap{ white-space:nowrap; }
1989
1990 .m_subscribe{
1991     position:absolute;
1992     right:.5em;
1993     top:.5em;
1994     margin:0;
1995 }
1996
1997 .fleft{float:left;}
1998 .fright{float:right;}
1999 .clear{clear: both;}
2000 .cright{clear: right;}
2001
2002 input.large, span.large {
2003     width:90%!important;
2004 }
2005
2006 .picker{
2007     padding:0 1em;
2008 }
2009
2010 /*** Voir adhérent ***/
2011 .details{
2012     width:85%;
2013     margin-bottom:1em;
2014     border-top: none!important;
2015 }
2016
2017 .details caption{
2018     font-weight:bold;
2019     font-size:1.1em;
2020     padding:.3em;
2021 }
2022 .details th{
2023     width:15em;
2024     font-weight:bold;
2025     vertical-align:middle;
2026     padding:0.2em 0.1em;
2027 }
2028
2029 td.photo img{
2030     border: 1px solid black;
2031     margin-top: 5px;
2032     margin-bottom: 5px;
2033 }
2034
2035 .dndhover {
2036     opacity:0.4;
2037 }
2038
2039 #details_menu{
2040     padding:0;
2041     text-align:center;
2042     list-style-type: none;
2043     width: 85%;
2044     margin: 0 auto;
2045     display: -webkit-box;
2046     display: -moz-box;
2047     display: -ms-flexbox;
2048     display: -webkit-flex;
2049     display: flex;
2050     -webkit-flex-flow: row wrap;
2051     flex-flow: row wrap;
2052     justify-content: space-around;
2053 }
2054 #details_menu li {
2055     width: 10em;
2056     margin-bottom:.5em;
2057 }
2058
2059 #details_menu li a {
2060     height: calc(100% - 32px);
2061     width: 100%;
2062 }
2063
2064 /*** /Voir adhérent ***/
2065
2066 /*** Onglets ***/
2067 .tabbed {
2068     display: inline-block;
2069     width: 100%;
2070 }
2071
2072 .tabbed > div {
2073     margin-bottom: 1em;
2074 }
2075
2076 .tabbed fieldset {
2077     margin: 0;
2078     padding: 0!important;
2079     border: none;
2080 }
2081
2082 .tabbed legend, .tabbed h3 {
2083     border: none;
2084     margin: 0;
2085     text-align: center;
2086     font-size: 1.2em;
2087 }
2088
2089 #tabs > div {
2090     margin: 0;
2091     padding: 0;
2092 }
2093 /*** /Onglets ***/
2094
2095 /*** Tooltips ***/
2096 #tooltip {
2097     position: absolute;
2098     z-index: 3000;
2099     background-color: white;
2100     padding: 5px;
2101     opacity: 0.95;
2102     -moz-border-radius: 6px;
2103     -webkit-border-radius: 6px;
2104     border-radius: 6px;
2105     -moz-box-shadow: 1px 1px 12px #555;
2106     -webkitbox-shadow: 1px 1px 12px #555;
2107     box-shadow: 1px 1px 12px #555;
2108
2109 }
2110 #tooltip h3, #tooltip div { margin: 0; }
2111
2112 .tt{
2113     width:20em;
2114 }
2115
2116 .galette_form label > i, label.bline > i, span.bline > i {
2117     float: right;
2118     font-size: 1.1em;
2119     color: rgba(0, 0, 255, .5);
2120 }
2121
2122 label:hover > i, span.bline:hover > i {
2123     color: rgba(0, 0, 255, 1);
2124 }
2125
2126 /*** /Tooltips ***/
2127
2128 .trombino{
2129     margin:.5em 0 0 .5em;
2130     background-color: #DDDDFF;
2131     padding-bottom:.2em;
2132     display: inline-block;
2133     vertical-align: top;
2134     text-align:center;
2135     width:240px;
2136     height:240px;
2137     -moz-border-radius: 10px 10px 10px 10px;
2138     -webkit-border-radius: 10px 10px 10px 10px;
2139     border-radius: 10px 10px 10px 10px;
2140 }
2141
2142 .trombino img{
2143     margin:.5em .5em 0 .5em;
2144 }
2145
2146 .trombinoscope {
2147     text-align: center;
2148 }
2149
2150 .tbl_line_even,
2151 .even > td {
2152     background-color: #EEEEEE!important;
2153     vertical-align: top;
2154 }
2155
2156 .tbl_line_odd,
2157 .odd > td {
2158     background-color: #E2E5EE!important;
2159     vertical-align: top;
2160 }
2161
2162 .cssform > .fields_list {
2163     display: block;
2164 }
2165 .fields_list li{
2166     line-height:1.5em;
2167     margin-top:.3em;
2168     padding:.1em .2em;
2169     vertical-align: middle;
2170     cursor: move;
2171 }
2172
2173 .yesno > input, .yesnoadmin > input {
2174     margin: 0.2em;
2175     vertical-align: bottom;
2176 }
2177
2178 .fields_list label {
2179     padding:0 .5em 0 .1em;
2180 }
2181
2182 .listing tr:hover td,
2183 .fields_list li:hover,
2184 .odd:hover > td,
2185 .even:hover > td {
2186     background-color: #DDDDFF!important;
2187 }
2188
2189 .listing tfoot tr:hover td, tr.checkboxes:hover td {
2190     background-color: transparent!important;
2191 }
2192
2193 .fields_list span.label{
2194     display:inline-block;
2195     width: 33%;
2196 }
2197
2198 .fields_list span.yesno{
2199     margin-right:.2em;
2200     display:inline-block;
2201     text-align:center;
2202     width: 18%;
2203 }
2204 .fields_list span.access{
2205     margin-right:.2em;
2206     min-width:25em;
2207     width:33%;
2208     display:inline-block;
2209     text-align:center;
2210 }
2211
2212 .fields_list .selectize-input {
2213     min-width: auto;
2214 }
2215
2216 #add_category{
2217     float:right;
2218 }
2219
2220 #expand, #collapse{
2221     padding: 0.4em 1em;
2222     position:relative;
2223 }
2224
2225 #expand span.ui-icon, #collapse span.ui-icon{
2226     float:left;
2227     margin-right: .2em;
2228 }
2229
2230 .collapsible{
2231     float:left;
2232 }
2233
2234 .ui-datepicker-trigger{
2235     cursor:pointer;
2236     vertical-align: middle;
2237     border:none;
2238     background:none;
2239 }
2240
2241 /** PAGINATION */
2242 .pages .current a{
2243     color:#FFB619;
2244     font-weight:bold;
2245 }
2246 .pages{
2247     text-align:center;
2248     margin:.2em 0 0 0;
2249     padding:0;
2250 }
2251 .pages a{
2252     padding:0 3px;
2253 }
2254 .pages a:hover{
2255     background-color:#EEEEEE;
2256     color:black;
2257 }
2258 .pages li{
2259     display:inline;
2260     padding:0;
2261     margin:0;
2262 }
2263 /** /PAGINATION*/
2264
2265 .notup2date {
2266     margin-top: 5em;
2267 }
2268
2269 .notup2date #errorbox {
2270     width: 30em;
2271 }
2272
2273 #oldie {
2274     /*position: absolute;
2275     top: 0;*/
2276     background-color: red;
2277     text-align: center;
2278     font-weight: bold;
2279 }
2280
2281 #oldie p {
2282     margin: 0;
2283 }
2284
2285 #member_stateofdue {
2286     margin: 0 auto .5em;
2287     width: 85%;
2288     padding: .1em 0;
2289     border-radius: 6px;
2290     text-align: center;
2291 }
2292
2293 .warnings {
2294     background-image: url(images/icon-warning.png);
2295     background-repeat: no-repeat;
2296     background-position: center right;
2297 }
2298
2299 .jqplot-target {
2300     display: inline-block;
2301 }
2302
2303 #ContribsAllTime {
2304     width: 800px;
2305 }
2306
2307 .error {
2308     max-width: 100em;
2309     margin: 0 auto;
2310 }
2311
2312 .vtop {
2313     vertical-align: top!important;
2314 }
2315
2316 .selectize-control.single .selectize-input::after {
2317     right: 10px!important;
2318 }
2319
2320 /** Mobile devices */
2321 @media (max-width: 767px) {
2322
2323     /* passer tous les éléments de largeur fixe en largeur automatique */
2324     body {
2325         width: auto !important;
2326         margin: auto !important;
2327         padding: auto !important;
2328     }
2329
2330     #details_menu, #member_stateofdue, .details {
2331         width: 100%;
2332     }
2333
2334     /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
2335     table, td, blockquote, code, pre, textarea, input, object, embed, video {
2336         max-width: 100% !important;
2337     }
2338
2339     /* gestion des mots longs */
2340     textarea, code, pre, samp {
2341         word-wrap: break-word; /* césure forcée */
2342         white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */
2343     }
2344
2345     .menu {
2346       text-align:center;
2347     }
2348
2349     #main_logo {
2350         position:relative;
2351         top:0;
2352         right:0;
2353     }
2354
2355     #titre, #listfilter {
2356         margin-left: 0;
2357         margin-right: 0;
2358     }
2359
2360     /** Responsive menu */
2361     #menu {
2362         float: none;
2363         position: absolute;
2364         min-height: 100vh;
2365     }
2366
2367     #content {
2368         padding-top: 0;
2369         margin: 0;
2370         background-color: white;
2371         transform: translateX(0) translateZ(0);
2372         transition: transform .2s;
2373         will-change: transform;
2374     }
2375
2376     /* Button deco */
2377     [class^="nav-button"] {
2378         display: block;
2379         z-index: 1;
2380         height: 1.5rem;
2381         width: 1.5rem;
2382         background-color: transparent;
2383         background-image: linear-gradient(to right, #333, #333),
2384         linear-gradient(to right, #333, #333),
2385         linear-gradient(to right, #333, #333);
2386         background-position: center top, center, center bottom;
2387         background-repeat: no-repeat;
2388         background-size: 1.5rem .3rem;
2389         padding: 0;
2390         outline: 0;
2391         border: 0;
2392         cursor: pointer;
2393         -webkit-tap-highlight-color:rgba(0,0,0,0);
2394         float:left;
2395         margin-top: .2em;
2396         margin-left: .3em;
2397     }
2398
2399     /* here's goes the push left effect */
2400     body:target #content {
2401         /* same as #content margin-left */
2402         transform: translateX(17em);
2403     }
2404     .nav-button-close,
2405     body:target .nav-button-open {
2406         display: none;
2407     }
2408     .nav-button-open,
2409     body:target .nav-button-close {
2410         display: block;
2411     }
2412
2413     /** Dashboard */
2414     #desktop, #news, #share {
2415         width: 100%;
2416         min-width: inherit;
2417     }
2418
2419     /** Forms */
2420     .cssform p, .cssform div.p,
2421     .galette_form p, .galette_form div.p {
2422         padding-left: 0;
2423     }
2424
2425     .cssform .bline, .galette_form label, .galette_form .bline {
2426         margin-left: 0;
2427         margin-bottom: .2em;
2428         padding-right: 0;
2429         display: block;
2430         width: auto;
2431     }
2432
2433     fieldset, fieldset.large {
2434         margin-left: 0;
2435         margin-right: 0;
2436     }
2437
2438     .galette_form textarea,
2439     .cssform textarea{
2440         width: 100%;
2441         height: 5em;
2442     }
2443
2444     /** Tables */
2445     table.listing {
2446         width: 100%;
2447     }
2448
2449     table.listing thead {
2450         /* Accessibly hide <thead> on narrow viewports */
2451         position: absolute;
2452         clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
2453         clip: rect(1px, 1px, 1px, 1px);
2454         padding: 0;
2455         border: 0;
2456         height: 1px;
2457         width: 1px;
2458         overflow: hidden;
2459     }
2460
2461      /* Set these items to display: block for narrow viewports */
2462     table.listing tbody,
2463     table.listing tr,
2464     table.listing th,
2465     table.listing td {
2466         display: block;
2467         padding: 0;
2468         text-align: left;
2469         white-space: normal;
2470     }
2471
2472     table.listing.same tr, tr.same {
2473         display: table-row;
2474     }
2475
2476     table.listing.same td, tr.same td {
2477         display: table-cell;
2478         width: 100%;
2479     }
2480
2481     table.listing td {
2482         margin: 0;
2483     }
2484
2485     table.listing tr {
2486         margin-bottom: .5em;
2487     }
2488
2489     table.listing td[data-scope="id"] {
2490         float: left;
2491         background: none!important;
2492         color: #212121;
2493         margin: .5em .2em 0 .2em;
2494     }
2495
2496     table.listing td[data-scope="row"] {
2497         background: #FFB619 url(jquery-ui/images/ui-bg_glass_65_ffb619_1x400.png) repeat-x scroll 50% 50%;
2498         color: #212121;
2499         font-weight: bold;
2500         margin-top: .3em;
2501         padding: .5em .2em;
2502         vertical-align: middle;
2503         text-align: left;
2504     }
2505
2506     table.listing td[data-scope="row"] a {
2507         color: #212121;
2508         vertical-align: middle;
2509     }
2510
2511
2512     table.listing td[data-scope="row"] a:hover {
2513         color: #666!important;
2514     }
2515
2516     table.listing td[data-scope="row"] input[type=checkbox],
2517     table.listing td[data-scope="row"] img {
2518         float: right;
2519     }
2520
2521     table.listing td.center {
2522         text-align: left!important;
2523     }
2524
2525     span[data-title]:before,
2526     td[data-title]:before {
2527       content: attr(data-title);
2528       display: inline-block;
2529       width: 10em;
2530       font-weight: bold;
2531     }
2532
2533     table.listing img[src$="icon-empty.png"] {
2534         display: none;
2535     }
2536
2537     table.listing .actions_row,
2538     table.listing .username_row {
2539         width: auto;
2540     }
2541
2542     table.listing td.actions_row {
2543         text-align: center!important;
2544     }
2545
2546     table.listing .row-title {
2547         display: inline;
2548     }
2549
2550     li.listing {
2551         display: none;
2552     }
2553
2554     .tbl_line_even span.label,
2555     .tbl_line_odd span.label,
2556     .tbl_line_even span.yesno,
2557     .tbl_line_odd span.yesno,
2558     .tbl_line_even span.yesnoadmin,
2559     .tbl_line_odd span.yesnoadmin {
2560         display: block;
2561         width: auto;
2562         text-align: left;
2563     }
2564
2565     #renewbox {
2566         width: auto;
2567         position: initial;
2568     }
2569
2570     #details_menu li {
2571         width: 8em;
2572     }
2573 }
2574 @media screen and (max-width:767px) and (orientation: landscape) {
2575     body {
2576         -webkit-text-size-adjust: 70%;
2577     }
2578 }