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