view/theme/quattro/quattro.less

   1 // Quattro Theme LESS file
   2
   3 /* global */
   4 body {
   5         font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
   6         font-size: 11px;
   7         background-color: @BodyBackground;
   8         color: @BodyColor;
   9         margin: 50px 0px 0px 0px;
  10         display:table;
  11 }
  12 h4 { font-size: 1.1em }
  13
  14 .shadow(@x: 0px, @y: 5px){
  15    -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  16    -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  17    box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  18 }
  19
  20 .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
  21         -moz-border-radius: @arguments;
  22         -webkit-border-radius: @arguments;
  23         border-radius: @arguments;
  24 }
  25 .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
  26 .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
  27
  28 .opaque(@v: 0.5){
  29         opacity: @v;
  30         -webkit-transition: all 0.2s ease-in-out;
  31         -moz-transition: all 0.2s ease-in-out;
  32         -o-transition: all 0.2s ease-in-out;
  33         -ms-transition: all 0.2s ease-in-out;
  34         transition: all 0.2s ease-in-out;
  35 }
  36
  37
  38 a, a:link { color: @Link; text-decoration: none; }
  39 a:visited { color: @LinkVisited; text-decoration: none; }
  40 a:hover {color: @LinkHover; text-decoration: underline; }
  41
  42 .left { float: left; }
  43 .right { float: right; }
  44 .hidden { display: none; }
  45 .clear { clear: both; }
  46
  47 .fakelink { color: @Link; text-decoration: none; cursor:pointer; }
  48 .fakelink:hover { color: @LinkHover; text-decoration: underline; }
  49
  50 code {
  51         font-family: Courier, monospace;
  52         white-space: pre;
  53         display: block;
  54         overflow: auto;
  55         border: 1px solid #444;
  56         background: #EEE;
  57         color: #444;
  58         padding: 10px;
  59         margin-top: 20px;
  60 }
  61
  62 #panel {
  63         position: absolute;
  64         width: 10em;
  65         background: @MenuBg;
  66         color: @Menu;
  67         margin: 0px;
  68         padding: 1em;
  69         list-style: none;
  70         border: 3px solid @MenuBorder;
  71         z-index: 100000;
  72
  73         .shadow();
  74 }
  75
  76
  77
  78 /* tool */
  79
  80 .tool {
  81         height: auto; overflow: auto;
  82         .label { float: left;}
  83         .action { float: right; }
  84 }
  85
  86
  87
  88
  89 /* popup notifications */
  90 #jGrowl.top-right {
  91         top: 30px;
  92         right: 15px;
  93 }
  94 div.jGrowl div.notice {
  95         background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center;
  96         color:  @NoticeColor;
  97         padding-left: 58px;
  98 }
  99 div.jGrowl div.info {
 100         background: @InfoBackgroundColor url("../../../images/icons/48/info.png") no-repeat 5px center;
 101         color:  @InfoColor;
 102         padding-left: 58px;
 103 }
 104
 105
 106
 107 /* header */
 108 header {
 109         position: fixed; left: 43%; right: 43%; top: 0px;
 110         margin: 0px; padding: 0px;
 111         /*width: 100%; height: 12px; */
 112         z-index: 110;
 113         color: @Grey1;
 114         #site-location {
 115                 display: none;
 116         }
 117
 118         #banner {
 119                 overflow: hidden;
 120                 text-align: center;
 121                 width: 100%;
 122                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
 123                 #logo-img { height: 22px; margin-top:5px;}
 124                 #logo-text { font-size: 22px }
 125         }
 126 }
 127 /* nav */
 128 nav {
 129         width: 100%; height: 32px;
 130         position: fixed; left: 0px; top: 0px;
 131         padding: 0px;
 132         background-color: @NavbarBackground;
 133         color: @Grey1;
 134         z-index: 100;
 135         .shadow(0px, 0px);
 136
 137                 a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
 138
 139                 ul {
 140                         margin: 0px;
 141                         padding: 0px 20px;
 142                         li {
 143                                 list-style: none;
 144                                 margin: 0px; padding: 0px;
 145                                 float: left;
 146                                 .menu-popup{ left: 0px; right: auto; }
 147                         }
 148
 149                 }
 150
 151                 .nav-menu-icon {
 152                         position: relative;
 153                         height: 22px;
 154                         padding: 5px;
 155                         margin: 0px 10px;
 156                         .roundtop();
 157
 158                         &.selected {
 159                                 background-color: @NavbarSelectedBg;
 160                         }
 161
 162                                 img { width: 22px; height: 22px; }
 163                                 .nav-notify { top: 3px; }
 164                 }
 165
 166                 .nav-menu {
 167                         position: relative;
 168                         height: 16px;
 169                         padding: 5px;
 170                         margin: 3px 15px 0px;
 171                         font-size: 14px;
 172                         border-bottom: 3px solid @NavbarBackground;
 173                         &.selected {
 174                                 border-bottom: 3px solid @NavbarSelectedBorder;
 175                         }
 176
 177                 }
 178
 179                 .nav-notify {
 180                         display: none;
 181                         position: absolute;
 182                         background-color: @NavbarNotifBg;
 183                         .rounded();
 184                         font-size: 10px;
 185                         padding: 1px 3px;
 186                         top: 0px;
 187                         right: -10px;
 188                         min-width: 15px;
 189                         text-align: right;
 190
 191                                 &.show{ display: block; }
 192                 }
 193
 194
 195                 #nav-help-link,
 196                 #nav-search-link,
 197                 #nav-directory-link,
 198                 #nav-apps-link,
 199                 #nav-site-linkmenu {
 200                         float: right;
 201                         .menu-popup{ right: 0px; left: auto; }
 202                 }
 203
 204                 #nav-notifications-linkmenu.on .icon.s22.notify,
 205                 #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/22/notify_on.png") }
 206                 #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
 207 }
 208
 209
 210 ul.menu-popup {
 211         position: absolute;
 212         display: none;
 213         width: 10em;
 214         background: @MenuBg;
 215         color: @Menu;
 216         margin: 0px;
 217         padding: 0px;
 218         list-style: none;
 219         border: 3px solid @MenuBorder;
 220         z-index: 100000;
 221
 222         .shadow();
 223
 224                 a { display: block; color: @MenuItem; padding: 5px 10px; text-decoration: none;}
 225                 a:hover { background-color: @MenuItemHoverBg; }
 226                 .menu-sep  { border-top: 1px solid @MenuItemSeparator; }
 227                 li { float: none;  overflow: auto; height: auto; display: block; }
 228                 li img { float: left; width: 16px; height: 16px; padding-right: 5px;}
 229                 .empty {
 230                         padding: 5px;
 231                         text-align: center;
 232                         color: @MenuEmpty;
 233                 }
 234                 .toolbar {
 235                         background-color:  @MenuEmpty;
 236                         height: auto; overflow: auto;
 237                         a { float: right; }
 238                         a:hover { background-color: @MenuBg; }
 239                 }
 240
 241 }
 242
 243 /* autocomplete popup */
 244 .acpopup {
 245         max-height:150px;
 246         background-color:@MenuBg;
 247         color: @Menu;
 248         border:1px solid #MenuBorder;
 249         overflow:auto;
 250         z-index:100000;
 251         .shadow();
 252 }
 253 .acpopupitem {
 254         color: @MenuItem; padding: 4px;
 255         clear:left;
 256         img {
 257                 float: left;
 258                 margin-right: 4px;
 259         }
 260         &.selected{
 261                 background-color: @MenuItemHoverBg;
 262         }
 263 }
 264
 265
 266 #nav-notifications-menu {
 267         width: 400px; max-height: 550px;
 268         overflow: auto;
 269         img { float: left; margin-right: 5px; }
 270         .contactname { font-weight: bold; }
 271         .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
 272 }
 273
 274
 275
 276
 277 /* aside 230px*/
 278 aside {
 279         display: table-cell;
 280         vertical-align: top;
 281         width: 200px;
 282         padding:0px 10px 0px 20px;
 283         border-right: 1px solid @AsideBorder;
 284
 285         .vcard {
 286                 .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
 287                 .title { margin-bottom: 5px; }
 288                 dl { height: auto; overflow: auto; }
 289                 dt {float: left; margin-left: 0px; width: 35%; text-align: right; color: @VCardLabelColor; }
 290                 dd {float: left; margin-left: 4px; width: 60%;}
 291
 292         }
 293
 294         #profile-extra-links {
 295                 ul { padding: 0px; margin: 0px; }
 296                 li { padding: 0px; margin: 0px; list-style: none; }
 297         }
 298
 299         #dfrn-request-link {
 300                 display: block;
 301                 .rounded();
 302                 color: @AsideConnect;
 303                 background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
 304                 font-weight: bold;
 305                 text-transform:uppercase;
 306                 padding: 4px 2px 2px 35px;
 307
 308                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
 309         }
 310
 311         #profiles-menu { width: 20em; }
 312
 313
 314 }
 315
 316 #contact-block {
 317         overflow: auto; height: auto;
 318         .contact-block-h4 { float: left; margin: 5px 0px; }
 319         .allcontact-link { float: right; margin: 5px 0px; }
 320         .contact-block-content {
 321                 clear: both;
 322                 overflow: hidden;
 323                 height: auto;
 324         }
 325         /*.contact-block-div { width:60px; height: 60px; }*/
 326         .contact-block-link {
 327                 float: left;
 328                 margin: 0px 2px 2px 0px;
 329                 img { width: 48px; height: 48px; }
 330         }
 331 }
 332
 333 /* group member */
 334 #contact-edit-drop-link,
 335 .mail-list-delete-wrapper,
 336 .group-delete-wrapper {
 337         float: right;
 338         margin-right: 50px;
 339         .drophide {
 340             background-image: url('../../../images/icons/22/delete.png');
 341             display: block; width: 22px; height: 22px;
 342             opacity: 0.3;
 343             position: relative;
 344             top: -50px;
 345         }
 346         .drop {
 347             background-image: url('../../../images/icons/22/delete.png');
 348             display: block; width: 22px; height: 22px;
 349             position: relative;
 350             top: -50px;
 351         }
 352 }
 353 /*
 354 #group-members {
 355         margin-top: 20px;
 356         padding: 10px;
 357         height: 250px;
 358         overflow: auto;
 359         border: 1px solid #ddd;
 360 }
 361 #group-members-end {
 362         clear: both;
 363 }
 364 #group-all-contacts {
 365         padding: 10px;
 366         height: 450px;
 367         overflow: auto;
 368         border: 1px solid #ddd;
 369 }
 370 #group-all-contacts-end {
 371         clear: both;
 372         margin-bottom: 10px;
 373 }
 374 .contact-block-div {
 375         float: left;
 376         width: 60px;
 377         height: 60px;
 378 }*/
 379
 380 /* widget */
 381 .widget {
 382         margin-bottom: 2em;
 383
 384         h3 { padding: 0px; margin: 2px;}
 385         .action { .opaque(0.1); }
 386         input.action { .opaque(0.5); }
 387         &:hover .title .action { .opaque(1); }
 388         .tool:hover .action { .opaque(1); }
 389         .tool:hover .action.ticked { .opaque(1); }
 390
 391         ul { padding: 0px;}
 392         ul li {padding-left: 16px; min-height: 16px; list-style: none; }
 393
 394         .tool.selected {
 395                 background: url('../../../images/selected.png') no-repeat left center;
 396         }
 397
 398         /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 399         .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
 400
 401 }
 402
 403 /* widget: search */
 404 #add-search-popup {
 405         width: 200px;
 406         top: 18px;
 407 }
 408
 409
 410 /* section 800px */
 411 section {
 412         display: table-cell;
 413         vertical-align: top;
 414         width: 770px;
 415         padding:0px 20px 0px 10px;
 416 }
 417
 418 /* wall item */
 419 .tread-wrapper {
 420         background-color: @ThreadBackgroundColor;
 421         position: relative;
 422         padding: 10px;
 423         margin-bottom: 20px;
 424         width: 750px;
 425         border-bottom: 1px solid @ThreadBottomBorderColor;
 426 }
 427 .wall-item-decor { position: absolute; left: 97%; top: -10px;  width: 16px;}
 428 .unstarred { display: none; }
 429
 430 .wall-item-container {
 431         display: table;
 432         width: 750px;
 433
 434         .wall-item-item,
 435         .wall-item-bottom { display: table-row; }
 436
 437         .wall-item-bottom { .opaque(0.5); }
 438         &:hover .wall-item-bottom { .opaque(1); }
 439         .wall-item-info {
 440                 display: table-cell;
 441                 vertical-align: top;
 442                 text-align: left;
 443                 width: 60px;
 444
 445         }
 446         .wall-item-location {
 447                 word-wrap: break-word;
 448                 width: 50px;
 449         }
 450         .wall-item-content {
 451                 display: table-cell;
 452                 font-size: 12px;
 453                 max-width: 720px;
 454                 word-wrap: break-word;
 455         }
 456         .wall-item-content img { max-width: 710px; }
 457         .wall-item-links,
 458         .wall-item-actions {
 459                 display: table-cell;
 460                 vertical-align: middle;
 461
 462                 .icon {
 463                         .opaque(0.5);
 464                 }
 465                 .icon:hover  {
 466                         .opaque(1.0);
 467                 }
 468         }
 469
 470         .wall-item-ago { padding-right: 40px; }
 471         .wall-item-name { font-weight: bold; }
 472
 473         .wall-item-actions-author { float: left; width: 20em; margin-top: 0.5em; }
 474         .wall-item-actions-social { float: left; margin-top: 0.5em;
 475                 a { margin-right: 3em; }
 476          }
 477         .wall-item-actions-tools { float: right; width: 15%;
 478                 a { float: right; }
 479                 input { float: right; }
 480         }
 481
 482 }
 483
 484
 485 .wall-item-container.comment {
 486         .contact-photo-wrapper { margin-left: 16px; }
 487         .contact-photo {
 488                 width: 32px; height: 32px;
 489         }
 490         .contact-photo-menu-button {
 491                 top: 15px !important;
 492                 left: 0px !important;
 493         }
 494         .wall-item-links { padding-left: 12px; }
 495 }
 496
 497 /* 'tag' item type */
 498 .wall-item-container.item-tag {
 499         .wall-item-content {
 500                 .opaque(0.5);
 501         }
 502         .contact-photo-wrapper { margin-left: 32px; }
 503         .contact-photo {
 504                 width: 16px; height: 16px;
 505         }
 506         .contact-photo-menu-button {
 507                 top: 15px !important;
 508                 left: 15px !important;
 509         }
 510 }
 511
 512
 513 .wall-item-comment-wrapper {
 514         margin: 1em 2em 1em 60px;
 515         .comment-edit-photo { display: none; }
 516         textarea {
 517                 height: 1em; width: 100%; font-size: 10px;
 518                 color: @CommentBoxEmptyColor;
 519                 border: 1px solid @CommentBoxEmptyBorderColor;
 520                 padding:0.3em;
 521         }
 522         .comment-edit-text-full {
 523                 font-size: 14px;
 524                 height: 4em;
 525                 color: @CommentBoxFullColor;
 526                 border: 1px solid @CommentBoxFullBorderColor;
 527         }
 528 }
 529
 530 .comment-edit-preview {
 531         width: 710px;
 532         border: 1px solid @Grey5;
 533         margin-top: 10px;
 534
 535         .contact-photo { width: 32px; height: 32px; margin-left: 16px;
 536                 /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
 537         }
 538         .contact-photo-menu-button {
 539                 top: 15px !important;
 540                 left: 15px !important;
 541         }
 542         .wall-item-links { padding-left: 12px; }
 543
 544         .wall-item-container { width: 700px; }
 545         .tread-wrapper { width: 700px; padding: 0; margin: 10px 0;}
 546 }
 547
 548 .shiny { border-right:10px solid @ShinyBorderColor; }
 549 #jot-preview-content .tread-wrapper { background-color: @JotPreviewBackgroundColor; }
 550
 551 .hide-comments-outer {margin-bottom: 0.8em; }
 552
 553 .wall-item-tags { padding-top: 5px; }
 554 .tag {
 555         background: url("../../../images/tag_b.png") no-repeat center left;
 556         color: @TagColor;
 557         padding-left: 3px;
 558         a {
 559                 padding-right: 8px;
 560                 background: url("../../../images/tag.png") no-repeat center right;
 561                 color: @TagColor;
 562         }
 563 }
 564 .filesavetags {
 565     padding: 3px 0px 3px 0px;
 566     opacity: 0.5;
 567 }
 568
 569 .wwto {
 570         position: absolute !important;
 571         width: 25px; height: 25px;
 572     background: #FFFFFF;
 573     border: 2px solid @Metalic3;
 574     height: 25px;
 575     width: 25px;
 576     overflow: hidden;
 577     padding: 1px;
 578     position: absolute !important;
 579     top: 40px;
 580     left: 30px;
 581
 582     .shadow(0px, 0px)
 583 }
 584 .wwto .contact-photo { width: 25px; height: 25px; }
 585
 586
 587 #pause {
 588  position: fixed;
 589  bottom: 5px;
 590  right: 5px;
 591 }
 592
 593
 594 .contact-photo-wrapper { position: relative; }
 595 .contact-photo {
 596         width: 48px; height: 48px;
 597         img { width: 48px; height: 48px; }
 598         overflow: hidden;
 599         display: block;
 600  }
 601 .contact-photo-menu-button {
 602         display: none;
 603         position: absolute;
 604         left: -2px;
 605         top: 31px;
 606 }
 607
 608 .contact-wrapper {
 609         float: left;
 610         width: 300px;
 611         height: 90px;
 612         padding-right: 10px;
 613         margin: 0 10px 10px 0px;
 614         .contact-photo-wrapper {
 615                 float: left;
 616                 margin-right: 10px;
 617         }
 618         .contact-photo {
 619                 width: 80px; height: 80px;
 620                 img { width: 80px; height: 80px; }
 621         }
 622         .contact-photo-menu-button {
 623                 left: 0px;
 624                 top: 63px;
 625         }
 626 }
 627 .directory-item {
 628         float: left;
 629         width: 200px;
 630         height: 200px;
 631         .contact-photo {
 632                 width: 175px; height: 175px;
 633                 img { width: 175px; height: 175px; }
 634         }
 635 }
 636 .contact-name { font-weight: bold; padding-top: 15px; }
 637 .contact-details {
 638         color: @Grey3; white-space: nowrap;
 639         overflow: hidden;
 640         text-overflow: ellipsis;
 641 }
 642
 643 /* editor */
 644 .jothidden { display: none; }
 645 #jot {
 646
 647         width: 100%;
 648         margin: 0px 2em 20px 0px;
 649
 650
 651         .profile-jot-text {
 652                 height: 1em; width: 99%; font-size: 10px;
 653                 color: @CommentBoxEmptyColor;
 654                 border: 1px solid @CommentBoxEmptyBorderColor;
 655                 padding:0.3em;
 656         }
 657
 658         #jot-tools {
 659                 margin: 0px; padding: 0px;
 660                 height: 40px; overflow: none;
 661                 width: 770px;
 662                 background-color: @JotToolsBackgroundColor;
 663                 border-bottom: 2px solid @JotToolsBorderColor;
 664                 li {
 665                         list-style: none;
 666                         float: left;
 667                         width: 80px;
 668                         height: 40px;
 669                         border-bottom: 2px solid @JotToolsBorderColor;
 670                         a {
 671                                 display: block;
 672                                 color: @JotToolsText;
 673                                 width: 100%;
 674                                 height:40px;
 675                                 text-align: center;
 676                                 line-height: 40px;
 677                                 overflow: hidden;
 678                         }
 679                 }
 680                 li:hover {
 681                         background-color: @JotToolsOverBackgroundColor;
 682                         border-bottom: 2px solid @JotToolsOverBorderColor;
 683                 }
 684                 li.perms {
 685                         float: right;
 686                         width: 40px;
 687                         a.unlock {
 688                                 width: 30px;
 689                                 border-left: 10px solid @JotPermissionUnlockBackgroundColor;
 690                                 background-color: @JotPermissionUnlockBackgroundColor;
 691                         }
 692                         a.lock {
 693                                 width: 30px;
 694                                 border-left: 10px solid @JotPermissionLockBackgroundColor;
 695                                 background-color: @JotPermissionLockBackgroundColor;
 696                         }
 697
 698                 }
 699                 li.submit {
 700                         float: right;
 701                         background-color: @JotSubmitBackgroundColor;
 702                         border-bottom: 2px solid @JotSubmitBackgroundColor;
 703                         border-right: 1px solid @Grey4;
 704                         border-left: 1px solid @Grey4;
 705                         input {
 706                                 border: 0px; margin: 0px; padding: 0px;
 707                                 background-color: @JotSubmitBackgroundColor;
 708                                 color: @JotSubmitText;
 709                                 width: 80px; height: 40px;
 710                                 line-height: 40px;
 711                         }
 712                         input:hover {
 713                                 background-color: @JotSubmitOverBackgroundColor;
 714                                 color: @JotSubmitOverText;
 715                         }
 716                 }
 717                 li.loading {
 718                         float: right;
 719                         background-color: @JotLoadingBackgroundColor;
 720                         width:  20px;
 721                         vertical-align: center;
 722                         text-align: center;
 723                         img { margin-top: 10px; }
 724                         border-top: 2px solid @JotToolsBorderColor;
 725                         height: 38px;
 726                 }
 727         }
 728
 729         #jot-title {
 730                 border: 0px;
 731                 margin: 0px;
 732                 height: 20px;
 733                 width: 500px;
 734                 font-weight: bold;
 735                 border: 1px solid @BodyBackground;
 736
 737                 &:-webkit-input-placeholder {
 738                         font-weight: normal;
 739                 }
 740
 741                 &:-moz-placeholder {
 742                         font-weight: normal;
 743                 }
 744
 745                 &:hover { border: 1px solid @CommentBoxEmptyBorderColor }
 746                 &:focus { border: 1px solid @CommentBoxEmptyBorderColor }
 747         }
 748
 749         #character-counter {
 750                 width: 40px;
 751                 float: right;
 752                 text-align: right;
 753                 height: 20px;
 754                 line-height: 20px;
 755                 padding-right: 20px;
 756         }
 757
 758         #jot-category {
 759                 border: 0px;
 760                 margin: 0px;
 761                 height: 20px;
 762                 width: 200px;
 763                 border: 1px solid @BodyBackground;
 764                 &:hover { border: 1px solid @CommentBoxEmptyBorderColor }
 765                 &:focus { border: 1px solid @CommentBoxEmptyBorderColor }
 766         }
 767 }
 768
 769
 770 /** buttons **/
 771 /*input[type="submit"] {
 772         border: 0px;
 773     background-color: @ButtonBackgroundColor;
 774     color: @ButtonColor;
 775     padding: 0px 10px;
 776         .rounded(5px);
 777     height: 18px;
 778 }*/
 779
 780
 781 /** acl **/
 782 #photo-edit-perms-select,
 783 #photos-upload-permissions-wrapper,
 784 #profile-jot-acl-wrapper{
 785         display:block!important;
 786 }
 787
 788
 789
 790 #acl-wrapper {
 791         width: 690px;
 792         float:left;
 793 }
 794 #acl-search {
 795         float:right;
 796         background: #ffffff url("../../../images/search_18.png") no-repeat right center;
 797         padding-right:20px;
 798 }
 799 #acl-showall {
 800         float: left;
 801         display: block;
 802         width: auto;
 803         height: 18px;
 804         background-color: #cccccc;
 805         background-image: url("../../../images/show_all_off.png");
 806         background-position: 7px 7px;
 807         background-repeat: no-repeat;
 808         padding: 7px 5px 0px 30px;
 809         color: #999999;
 810         .rounded(5px);
 811 }
 812 #acl-showall.selected {
 813         color: #000000;
 814         background-color: #ff9900;
 815         background-image: url("../../../images/show_all_on.png");
 816 }
 817
 818 #acl-list {
 819         height: 210px;
 820         border: 1px solid #cccccc;
 821         clear: both;
 822         margin-top: 30px;
 823         overflow: auto;
 824 }
 825 #acl-list-content {
 826
 827 }
 828 .acl-list-item {
 829         display: block;
 830         width: 150px;
 831         height: 30px;
 832         border: 1px solid #cccccc;
 833         margin: 5px;
 834         float: left;
 835 }
 836 .acl-list-item img{
 837         width:22px;
 838         height: 22px;
 839         float: left;
 840         margin: 4px;
 841 }
 842 .acl-list-item p { height: 12px; font-size: 10px; margin: 0px; padding: 2px 0px 1px; overflow: hidden;}
 843 .acl-list-item a {
 844         font-size: 8px;
 845         display: block;
 846         width: 40px;
 847         height: 10px;
 848         float: left;
 849         color: #999999;
 850         background-color: #cccccc;
 851         background-position: 3px 3px;
 852         background-repeat: no-repeat;
 853         margin-right: 5px;
 854         -webkit-border-radius: 2px ;
 855         -moz-border-radius: 2px;
 856         border-radius: 2px;
 857         padding-left: 15px;
 858 }
 859 #acl-wrapper a:hover {
 860         text-decoration: none;
 861         color:#000000;
 862 }
 863 .acl-button-show { background-image: url("../../../images/show_off.png"); }
 864 .acl-button-hide { background-image: url("../../../images/hide_off.png"); }
 865
 866 .acl-button-show.selected {
 867         color: #000000;
 868         background-color: #9ade00;
 869         background-image: url("../../../images/show_on.png");
 870 }
 871 .acl-button-hide.selected {
 872         color: #000000;
 873         background-color: #ff4141;
 874         background-image: url("../../../images/hide_on.png");
 875 }
 876 .acl-list-item.groupshow { border-color: #9ade00; }
 877 .acl-list-item.grouphide { border-color: #ff4141; }
 878 /** /acl **/
 879
 880 /** tab buttons **/
 881 ul.tabs {
 882     list-style-type: none;
 883     padding-bottom: 10px;
 884
 885     li {
 886         float: left;
 887         margin-left: 20px;
 888
 889         .active {
 890                         border-bottom: 1px solid @LinkVisited;
 891         }
 892     }
 893
 894 }
 895
 896
 897 /** group editor **/
 898 #group-edit-desc { margin-top: 1em; color: @FieldHelpColor; }
 899 #group-update-wrapper{
 900         height: auto; overflow: auto;
 901         #group {
 902                 width:300px;
 903                 float:left;
 904                 margin-right:20px;
 905         }
 906         #contacts {
 907                 width:300px;
 908                 float:left;
 909         }
 910         #group-separator { display: none; }
 911         .contact_list {
 912                 height: 300px;
 913                 border: 1px solid @MenuBorder;
 914                 overflow: auto;
 915                 .contact-block-div  {
 916                         width: 50px; height: 50px;
 917                         float: left;
 918                 }
 919         }
 920 }
 921
 922 /**
 923  * Form fields
 924  */
 925 .field {
 926         margin-bottom: 10px;
 927         padding-bottom: 10px;
 928         overflow: auto;
 929         width: 100%;
 930
 931
 932         label {
 933                 float: left;
 934                 width: 200px;
 935         }
 936
 937         input,
 938         textarea {
 939                 width: 400px;
 940         }
 941         input[type="checkbox"], input[type="radio"]{
 942                 width: auto;
 943         }
 944
 945         textarea { height: 100px; }
 946         .field_help {
 947                 display: block;
 948                 margin-left: 200px;
 949                 color: @FieldHelpColor;
 950
 951         }
 952
 953
 954         .onoff {
 955                 float: left;
 956                 width: 80px;
 957         }
 958         .onoff a {
 959                 display: block;
 960                 border:1px solid #666666;
 961                 background-image:url("../../../images/onoff.jpg");
 962                 background-repeat: no-repeat;
 963                 padding: 4px 2px 2px 2px;
 964                 height: 16px;
 965                 text-decoration: none;
 966         }
 967         .onoff .off {
 968                 border-color:#666666;
 969                 padding-left: 40px;
 970                 background-position: left center;
 971                 background-color: #cccccc;
 972                 color: #666666;
 973                 text-align: right;
 974         }
 975         .onoff .on {
 976                 border-color:#204A87;
 977                 padding-right: 40px;
 978                 background-position: right center;
 979                 background-color: #D7E3F1;
 980                 color: #204A87;
 981                 text-align: left;
 982         }
 983         .hidden { display: none!important; }
 984
 985         &.radio .field_help { margin-left: 0px; }
 986 }
 987
 988
 989 #profile-edit-links li {
 990         list-style: none;
 991         margin-top: 10px;
 992 }
 993
 994 #profile-edit-default-desc {
 995         color: #FF0000;
 996         border: 1px solid #FF8888;
 997         background-color: #FFEEEE;
 998         padding: 7px;
 999 }
1000 #profile-edit-profile-name-label,
1001 #profile-edit-name-label,
1002 #profile-edit-pdesc-label,
1003 #profile-edit-gender-label,
1004 #profile-edit-dob-label,
1005 #profile-edit-address-label,
1006 #profile-edit-locality-label,
1007 #profile-edit-region-label,
1008 #profile-edit-postal-code-label,
1009 #profile-edit-country-name-label,
1010 #profile-edit-marital-label,
1011 #profile-edit-with-label,
1012 #profile-edit-sexual-label,
1013 #profile-edit-politic-label,
1014 #profile-edit-religion-label,
1015 #profile-edit-pubkeywords-label,
1016 #profile-edit-prvkeywords-label,
1017 #profile-edit-gender-select,
1018 #profile-edit-homepage-label {
1019         float: left;
1020         width: 175px;
1021         padding-top: 7px;
1022 }
1023 #profile-edit-profile-name,
1024 #profile-edit-name,
1025 #gender-select,
1026 #profile-edit-pdesc,
1027 #profile-edit-gender,
1028 #profile-edit-dob,
1029 #profile-edit-address,
1030 #profile-edit-locality,
1031 #profile-edit-region,
1032 #profile-edit-postal-code,
1033 #profile-edit-country-name,
1034 #profile-edit-marital,
1035 #profile-edit-with,
1036 #profile-edit-sexual,
1037 #profile-edit-politic,
1038 #profile-edit-religion,
1039 #profile-edit-pubkeywords,
1040 #profile-edit-prvkeywords,
1041 #profile-edit-homepage {
1042     margin-top: 5px;
1043 }
1044
1045 /* oauth */
1046 .oauthapp {
1047         height: auto; overflow: auto;
1048         border-bottom: 2px solid #cccccc;
1049         padding-bottom: 1em;
1050         margin-bottom: 1em;
1051 }
1052 .oauthapp img {
1053         float: left;
1054         width: 48px; height: 48px;
1055         margin: 10px;
1056 }
1057 .oauthapp img.noicon {
1058         background-image: url("../../../images/icons/48/plugin.png");
1059         background-position: center center;
1060         background-repeat: no-repeat;
1061 }
1062 .oauthapp a {
1063         float: left;
1064 }
1065
1066 /* contacts */
1067 .contact-entry-wrapper {
1068         width: 50px; float: left;
1069 }
1070
1071 /* photo */
1072 .lframe {
1073         float: left;
1074         margin: 0px 10px 10px 0px;
1075 }
1076
1077 /* profile match wrapper */
1078 .profile-match-wrapper {
1079         float: left;
1080         width: 90px;
1081         height: 90px;
1082         margin-bottom: 20px;
1083         .contact-photo {
1084                 width: 80px; height: 80px;
1085                 img { width: 80px; height: 80px; }
1086         }
1087         .contact-photo-menu-button {
1088                 left: 0px;
1089                 top: 63px;
1090         }
1091 }
1092
1093 /* messages */
1094 #message-new {
1095         background: @MessageNewBackgroundColor;
1096         border: 1px solid @MessageNewBorderColor;
1097         width: 150px;
1098         a {
1099                 color: @MessageNewColor;
1100                 text-align: center;
1101                 display: block;
1102                 font-weight: bold;
1103                 padding: 1em 0px;
1104         }
1105 }
1106
1107 .mail-list-wrapper {
1108         background-color: @MailListBackgroundColor;
1109         margin-bottom: 5px;
1110         width: 100%; height: auto; overflow: hidden;
1111
1112         span { display: block; float: left; width: 20%; overflow: hidden;}
1113
1114         .mail-subject {
1115                 width: 30%;
1116                 padding:4px 0px 0px 4px;
1117                 a { display: block; }
1118                 &.unseen a { font-weight: bold; }
1119         }
1120         .mail-date { padding: 4px 4px 0px 4px; }
1121         .mail-from { padding: 4px 4px 0px 4px; }
1122         .mail-count { padding: 4px 4px 0px 4px; text-align: right;}
1123
1124         .mail-delete { float: right; }
1125 }
1126
1127 #mail-display-subject {
1128         background-color: @MailDisplaySubjectBackgroundColor;
1129         color: @MailDisplaySubjectColor;
1130         margin-bottom: 10px;
1131         width: 100%; height: auto; overflow: hidden;
1132         span { float: left; overflow: hidden; padding: 4px 0px 0px 10px;}
1133         .mail-delete { float: right;  .opaque(0.5);}
1134         &:hover .mail-delete { .opaque(1); }
1135
1136 }
1137
1138 /* theme screenshot */
1139 .screenshot, #theme-preview {
1140         position: absolute;
1141         width:202px;
1142         left: 70%;
1143         top: 50px;
1144         img { width: 200px; height: 150px; }
1145 }
1146
1147 /* page footer */
1148 footer { height: 100px; display: table-row; }
1149
1150 .pager {
1151     margin-top: 25px;
1152     clear: both;
1153 }
1154