view/theme/quattro/dark/style.css

   1 /**
   2  * Fabio Comuni <http://kirgroup.com/profile/fabrixxm>
   3  **/
   4 /* icons */
   5 .icon {
   6   background-color: transparent ;
   7   background-repeat: no-repeat;
   8   background-position: left center;
   9   display: block;
  10   overflow: hidden;
  11   text-indent: -9999px;
  12   padding: 1px;
  13 }
  14 .icon.text {
  15   text-indent: 0px;
  16 }
  17 .icon.s10 {
  18   min-width: 10px;
  19   height: 10px;
  20 }
  21 .icon.s10.notify {
  22   background-image: url("../../../images/icons/10/notify_off.png");
  23 }
  24 .icon.s10.gear {
  25   background-image: url("../../../images/icons/10/gear.png");
  26 }
  27 .icon.s10.add {
  28   background-image: url("../../../images/icons/10/add.png");
  29 }
  30 .icon.s10.delete {
  31   background-image: url("../../../images/icons/10/delete.png");
  32 }
  33 .icon.s10.edit {
  34   background-image: url("../../../images/icons/10/edit.png");
  35 }
  36 .icon.s10.star {
  37   background-image: url("../../../images/icons/10/star.png");
  38 }
  39 .icon.s10.menu {
  40   background-image: url("../../../images/icons/10/menu.png");
  41 }
  42 .icon.s10.link {
  43   background-image: url("../../../images/icons/10/link.png");
  44 }
  45 .icon.s10.lock {
  46   background-image: url("../../../images/icons/10/lock.png");
  47 }
  48 .icon.s10.unlock {
  49   background-image: url("../../../images/icons/10/unlock.png");
  50 }
  51 .icon.s10.plugin {
  52   background-image: url("../../../images/icons/10/plugin.png");
  53 }
  54 .icon.s10.type-unkn {
  55   background-image: url("../../../images/icons/10/zip.png");
  56 }
  57 .icon.s10.type-audio {
  58   background-image: url("../../../images/icons/10/audio.png");
  59 }
  60 .icon.s10.type-video {
  61   background-image: url("../../../images/icons/10/video.png");
  62 }
  63 .icon.s10.type-image {
  64   background-image: url("../../../images/icons/10/image.png");
  65 }
  66 .icon.s10.type-text {
  67   background-image: url("../../../images/icons/10/text.png");
  68 }
  69 .icon.s10.language {
  70   background-image: url("icons/language.png");
  71 }
  72 .icon.s10.text {
  73   padding: 2px 0px 0px 15px;
  74 }
  75 .icon.s16 {
  76   min-width: 16px;
  77   height: 16px;
  78 }
  79 .icon.s16.notify {
  80   background-image: url("../../../images/icons/16/notify_off.png");
  81 }
  82 .icon.s16.gear {
  83   background-image: url("../../../images/icons/16/gear.png");
  84 }
  85 .icon.s16.add {
  86   background-image: url("../../../images/icons/16/add.png");
  87 }
  88 .icon.s16.delete {
  89   background-image: url("../../../images/icons/16/delete.png");
  90 }
  91 .icon.s16.edit {
  92   background-image: url("../../../images/icons/16/edit.png");
  93 }
  94 .icon.s16.star {
  95   background-image: url("../../../images/icons/16/star.png");
  96 }
  97 .icon.s16.menu {
  98   background-image: url("../../../images/icons/16/menu.png");
  99 }
 100 .icon.s16.link {
 101   background-image: url("../../../images/icons/16/link.png");
 102 }
 103 .icon.s16.lock {
 104   background-image: url("../../../images/icons/16/lock.png");
 105 }
 106 .icon.s16.unlock {
 107   background-image: url("../../../images/icons/16/unlock.png");
 108 }
 109 .icon.s16.plugin {
 110   background-image: url("../../../images/icons/16/plugin.png");
 111 }
 112 .icon.s16.type-unkn {
 113   background-image: url("../../../images/icons/16/zip.png");
 114 }
 115 .icon.s16.type-audio {
 116   background-image: url("../../../images/icons/16/audio.png");
 117 }
 118 .icon.s16.type-video {
 119   background-image: url("../../../images/icons/16/video.png");
 120 }
 121 .icon.s16.type-image {
 122   background-image: url("../../../images/icons/16/image.png");
 123 }
 124 .icon.s16.type-text {
 125   background-image: url("../../../images/icons/16/text.png");
 126 }
 127 .icon.s16.language {
 128   background-image: url("icons/language.png");
 129 }
 130 .icon.s16.text {
 131   padding: 4px 0px 0px 20px;
 132 }
 133 .icon.s22 {
 134   min-width: 22px;
 135   height: 22px;
 136 }
 137 .icon.s22.notify {
 138   background-image: url("../../../images/icons/22/notify_off.png");
 139 }
 140 .icon.s22.gear {
 141   background-image: url("../../../images/icons/22/gear.png");
 142 }
 143 .icon.s22.add {
 144   background-image: url("../../../images/icons/22/add.png");
 145 }
 146 .icon.s22.delete {
 147   background-image: url("../../../images/icons/22/delete.png");
 148 }
 149 .icon.s22.edit {
 150   background-image: url("../../../images/icons/22/edit.png");
 151 }
 152 .icon.s22.star {
 153   background-image: url("../../../images/icons/22/star.png");
 154 }
 155 .icon.s22.menu {
 156   background-image: url("../../../images/icons/22/menu.png");
 157 }
 158 .icon.s22.link {
 159   background-image: url("../../../images/icons/22/link.png");
 160 }
 161 .icon.s22.lock {
 162   background-image: url("../../../images/icons/22/lock.png");
 163 }
 164 .icon.s22.unlock {
 165   background-image: url("../../../images/icons/22/unlock.png");
 166 }
 167 .icon.s22.plugin {
 168   background-image: url("../../../images/icons/22/plugin.png");
 169 }
 170 .icon.s22.type-unkn {
 171   background-image: url("../../../images/icons/22/zip.png");
 172 }
 173 .icon.s22.type-audio {
 174   background-image: url("../../../images/icons/22/audio.png");
 175 }
 176 .icon.s22.type-video {
 177   background-image: url("../../../images/icons/22/video.png");
 178 }
 179 .icon.s22.type-image {
 180   background-image: url("../../../images/icons/22/image.png");
 181 }
 182 .icon.s22.type-text {
 183   background-image: url("../../../images/icons/22/text.png");
 184 }
 185 .icon.s22.language {
 186   background-image: url("icons/language.png");
 187 }
 188 .icon.s22.text {
 189   padding: 10px 0px 0px 25px;
 190 }
 191 .icon.s48 {
 192   width: 48px;
 193   height: 48px;
 194 }
 195 .icon.s48.notify {
 196   background-image: url("../../../images/icons/48/notify_off.png");
 197 }
 198 .icon.s48.gear {
 199   background-image: url("../../../images/icons/48/gear.png");
 200 }
 201 .icon.s48.add {
 202   background-image: url("../../../images/icons/48/add.png");
 203 }
 204 .icon.s48.delete {
 205   background-image: url("../../../images/icons/48/delete.png");
 206 }
 207 .icon.s48.edit {
 208   background-image: url("../../../images/icons/48/edit.png");
 209 }
 210 .icon.s48.star {
 211   background-image: url("../../../images/icons/48/star.png");
 212 }
 213 .icon.s48.menu {
 214   background-image: url("../../../images/icons/48/menu.png");
 215 }
 216 .icon.s48.link {
 217   background-image: url("../../../images/icons/48/link.png");
 218 }
 219 .icon.s48.lock {
 220   background-image: url("../../../images/icons/48/lock.png");
 221 }
 222 .icon.s48.unlock {
 223   background-image: url("../../../images/icons/48/unlock.png");
 224 }
 225 .icon.s48.plugin {
 226   background-image: url("../../../images/icons/48/plugin.png");
 227 }
 228 .icon.s48.type-unkn {
 229   background-image: url("../../../images/icons/48/zip.png");
 230 }
 231 .icon.s48.type-audio {
 232   background-image: url("../../../images/icons/48/audio.png");
 233 }
 234 .icon.s48.type-video {
 235   background-image: url("../../../images/icons/48/video.png");
 236 }
 237 .icon.s48.type-image {
 238   background-image: url("../../../images/icons/48/image.png");
 239 }
 240 .icon.s48.type-text {
 241   background-image: url("../../../images/icons/48/text.png");
 242 }
 243 .icon.s48.language {
 244   background-image: url("icons/language.png");
 245 }
 246 .icon.on {
 247   background-image: url("icons/addon_on.png");
 248   min-width: 16px;
 249   height: 16px;
 250   background-position: 0px 0px;
 251 }
 252 .icon.off {
 253   background-image: url("icons/addon_off.png");
 254   width: 16px;
 255   height: 16px;
 256   background-position: 0px 0px;
 257 }
 258 /* global */
 259 body {
 260   font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
 261   font-size: 11px;
 262   background-color: #ffffff;
 263   color: #2d2d2d;
 264   margin: 50px 0px 0px 0px;
 265   display: table;
 266 }
 267 h4 {
 268   font-size: 1.1em;
 269 }
 270 a, a:link {
 271   color: #005c94;
 272   text-decoration: none;
 273 }
 274 a:visited {
 275   color: #005c94;
 276   text-decoration: none;
 277 }
 278 a:hover {
 279   color: #005c94;
 280   text-decoration: underline;
 281 }
 282 .left {
 283   float: left;
 284 }
 285 .right {
 286   float: right;
 287 }
 288 .hidden {
 289   display: none;
 290 }
 291 .clear {
 292   clear: both;
 293 }
 294 .fakelink {
 295   color: #005c94;
 296   text-decoration: none;
 297   cursor: pointer;
 298 }
 299 .fakelink:hover {
 300   color: #005c94;
 301   text-decoration: underline;
 302 }
 303 code {
 304   font-family: Courier, monospace;
 305   white-space: pre;
 306   display: block;
 307   overflow: auto;
 308   border: 1px solid #444;
 309   background: #EEE;
 310   color: #444;
 311   padding: 10px;
 312   margin-top: 20px;
 313 }
 314 #panel {
 315   position: absolute;
 316   width: 10em;
 317   background: #ffffff;
 318   color: #2d2d2d;
 319   margin: 0px;
 320   padding: 1em;
 321   list-style: none;
 322   border: 3px solid #364e59;
 323   z-index: 100000;
 324   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 325   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 326   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 327 }
 328 /* tool */
 329 .tool {
 330   height: auto;
 331   overflow: auto;
 332 }
 333 .tool .label {
 334   float: left;
 335 }
 336 .tool .action {
 337   float: right;
 338 }
 339 /* popup notifications */
 340 #jGrowl.top-right {
 341   top: 30px;
 342   right: 15px;
 343 }
 344 div.jGrowl div.notice {
 345   background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 346   color: #ffffff;
 347   padding-left: 58px;
 348 }
 349 div.jGrowl div.info {
 350   background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 351   color: #ffffff;
 352   padding-left: 58px;
 353 }
 354 /* header */
 355 header {
 356   position: fixed;
 357   left: 43%;
 358   right: 43%;
 359   top: 0px;
 360   margin: 0px;
 361   padding: 0px;
 362   /*width: 100%; height: 12px; */
 363
 364   z-index: 110;
 365   color: #ffffff;
 366 }
 367 header #site-location {
 368   display: none;
 369 }
 370 header #banner {
 371   overflow: hidden;
 372   text-align: center;
 373   width: 100%;
 374 }
 375 header #banner a,
 376 header #banner a:active,
 377 header #banner a:visited,
 378 header #banner a:link,
 379 header #banner a:hover {
 380   color: #ffffff;
 381   text-decoration: none;
 382   outline: none;
 383   vertical-align: bottom;
 384 }
 385 header #banner #logo-img {
 386   height: 22px;
 387   margin-top: 5px;
 388 }
 389 header #banner #logo-text {
 390   font-size: 22px;
 391 }
 392 /* nav */
 393 nav {
 394   width: 100%;
 395   height: 32px;
 396   position: fixed;
 397   left: 0px;
 398   top: 0px;
 399   padding: 0px;
 400   background-color: #0e232e;
 401   color: #ffffff;
 402   z-index: 100;
 403   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 404   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 405   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 406 }
 407 nav a,
 408 nav a:active,
 409 nav a:visited,
 410 nav a:link,
 411 nav a:hover {
 412   color: #ffffff;
 413   text-decoration: none;
 414   outline: none;
 415 }
 416 nav ul {
 417   margin: 0px;
 418   padding: 0px 20px;
 419 }
 420 nav ul li {
 421   list-style: none;
 422   margin: 0px;
 423   padding: 0px;
 424   float: left;
 425 }
 426 nav ul li .menu-popup {
 427   left: 0px;
 428   right: auto;
 429 }
 430 nav .nav-menu-icon {
 431   position: relative;
 432   height: 22px;
 433   padding: 5px;
 434   margin: 0px 10px;
 435   -moz-border-radius: 5px 5px 0 0;
 436   -webkit-border-radius: 5px 5px 0 0;
 437   border-radius: 5px 5px 0 0;
 438 }
 439 nav .nav-menu-icon.selected {
 440   background-color: #364e59;
 441 }
 442 nav .nav-menu-icon img {
 443   width: 22px;
 444   height: 22px;
 445 }
 446 nav .nav-menu-icon .nav-notify {
 447   top: 3px;
 448 }
 449 nav .nav-menu {
 450   position: relative;
 451   height: 16px;
 452   padding: 5px;
 453   margin: 3px 15px 0px;
 454   font-size: 14px;
 455   border-bottom: 3px solid #0e232e;
 456 }
 457 nav .nav-menu.selected {
 458   border-bottom: 3px solid #9eabb0;
 459 }
 460 nav .nav-notify {
 461   display: none;
 462   position: absolute;
 463   background-color: #19aeff;
 464   -moz-border-radius: 5px 5px 5px 5px;
 465   -webkit-border-radius: 5px 5px 5px 5px;
 466   border-radius: 5px 5px 5px 5px;
 467   font-size: 10px;
 468   padding: 1px 3px;
 469   top: 0px;
 470   right: -10px;
 471   min-width: 15px;
 472   text-align: right;
 473 }
 474 nav .nav-notify.show {
 475   display: block;
 476 }
 477 nav #nav-help-link,
 478 nav #nav-search-link,
 479 nav #nav-directory-link,
 480 nav #nav-apps-link,
 481 nav #nav-site-linkmenu {
 482   float: right;
 483 }
 484 nav #nav-help-link .menu-popup,
 485 nav #nav-search-link .menu-popup,
 486 nav #nav-directory-link .menu-popup,
 487 nav #nav-apps-link .menu-popup,
 488 nav #nav-site-linkmenu .menu-popup {
 489   right: 0px;
 490   left: auto;
 491 }
 492 nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 493   background-image: url("../../../images/icons/22/notify_on.png");
 494 }
 495 nav #nav-apps-link.selected {
 496   background-color: #364e59;
 497 }
 498 ul.menu-popup {
 499   position: absolute;
 500   display: none;
 501   width: 10em;
 502   background: #ffffff;
 503   color: #2d2d2d;
 504   margin: 0px;
 505   padding: 0px;
 506   list-style: none;
 507   border: 3px solid #364e59;
 508   z-index: 100000;
 509   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 510   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 511   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 512 }
 513 ul.menu-popup a {
 514   display: block;
 515   color: #2d2d2d;
 516   padding: 5px 10px;
 517   text-decoration: none;
 518 }
 519 ul.menu-popup a:hover {
 520   background-color: #bdcdd4;
 521 }
 522 ul.menu-popup .menu-sep {
 523   border-top: 1px solid #9eabb0;
 524 }
 525 ul.menu-popup li {
 526   float: none;
 527   overflow: auto;
 528   height: auto;
 529   display: block;
 530 }
 531 ul.menu-popup li img {
 532   float: left;
 533   width: 16px;
 534   height: 16px;
 535   padding-right: 5px;
 536 }
 537 ul.menu-popup .empty {
 538   padding: 5px;
 539   text-align: center;
 540   color: #9eabb0;
 541 }
 542 ul.menu-popup .toolbar {
 543   background-color: #9eabb0;
 544   height: auto;
 545   overflow: auto;
 546 }
 547 ul.menu-popup .toolbar a {
 548   float: right;
 549 }
 550 ul.menu-popup .toolbar a:hover {
 551   background-color: #ffffff;
 552 }
 553 /* autocomplete popup */
 554 .acpopup {
 555   max-height: 150px;
 556   background-color: #ffffff;
 557   color: #2d2d2d;
 558   border: 1px solid #MenuBorder;
 559   overflow: auto;
 560   z-index: 100000;
 561   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 562   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 563   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 564 }
 565 .acpopupitem {
 566   color: #2d2d2d;
 567   padding: 4px;
 568   clear: left;
 569 }
 570 .acpopupitem img {
 571   float: left;
 572   margin-right: 4px;
 573 }
 574 .acpopupitem.selected {
 575   background-color: #bdcdd4;
 576 }
 577 #nav-notifications-menu {
 578   width: 400px;
 579   max-height: 550px;
 580   overflow: auto;
 581 }
 582 #nav-notifications-menu img {
 583   float: left;
 584   margin-right: 5px;
 585 }
 586 #nav-notifications-menu .contactname {
 587   font-weight: bold;
 588 }
 589 #nav-notifications-menu .notif-when {
 590   font-size: 10px;
 591   color: #9eabb0;
 592   display: block;
 593 }
 594 /* aside 230px*/
 595 aside {
 596   display: table-cell;
 597   vertical-align: top;
 598   width: 200px;
 599   padding: 0px 10px 0px 20px;
 600   border-right: 1px solid #bdcdd4;
 601 }
 602 aside .vcard .fn {
 603   font-size: 16px;
 604   font-weight: bold;
 605   margin-bottom: 5px;
 606 }
 607 aside .vcard .title {
 608   margin-bottom: 5px;
 609 }
 610 aside .vcard dl {
 611   height: auto;
 612   overflow: auto;
 613 }
 614 aside .vcard dt {
 615   float: left;
 616   margin-left: 0px;
 617   width: 35%;
 618   text-align: right;
 619   color: #999999;
 620 }
 621 aside .vcard dd {
 622   float: left;
 623   margin-left: 4px;
 624   width: 60%;
 625 }
 626 aside #profile-extra-links ul {
 627   padding: 0px;
 628   margin: 0px;
 629 }
 630 aside #profile-extra-links li {
 631   padding: 0px;
 632   margin: 0px;
 633   list-style: none;
 634 }
 635 aside #dfrn-request-link {
 636   display: block;
 637   -moz-border-radius: 5px 5px 5px 5px;
 638   -webkit-border-radius: 5px 5px 5px 5px;
 639   border-radius: 5px 5px 5px 5px;
 640   color: #ffffff;
 641   background: #005c94 url('../../../images/connect-bg.png') no-repeat left center;
 642   font-weight: bold;
 643   text-transform: uppercase;
 644   padding: 4px 2px 2px 35px;
 645 }
 646 aside #dfrn-request-link:hover {
 647   text-decoration: none;
 648   background-color: #19aeff;
 649 }
 650 aside #profiles-menu {
 651   width: 20em;
 652 }
 653 #contact-block {
 654   overflow: auto;
 655   height: auto;
 656   /*.contact-block-div { width:60px; height: 60px; }*/
 657
 658 }
 659 #contact-block .contact-block-h4 {
 660   float: left;
 661   margin: 5px 0px;
 662 }
 663 #contact-block .allcontact-link {
 664   float: right;
 665   margin: 5px 0px;
 666 }
 667 #contact-block .contact-block-content {
 668   clear: both;
 669   overflow: hidden;
 670   height: auto;
 671 }
 672 #contact-block .contact-block-link {
 673   float: left;
 674   margin: 0px 2px 2px 0px;
 675 }
 676 #contact-block .contact-block-link img {
 677   width: 48px;
 678   height: 48px;
 679 }
 680 /* group member */
 681 #contact-edit-drop-link, .mail-list-delete-wrapper, .group-delete-wrapper {
 682   float: right;
 683   margin-right: 50px;
 684 }
 685 #contact-edit-drop-link .drophide, .mail-list-delete-wrapper .drophide, .group-delete-wrapper .drophide {
 686   background-image: url('../../../images/icons/22/delete.png');
 687   display: block;
 688   width: 22px;
 689   height: 22px;
 690   opacity: 0.3;
 691   position: relative;
 692   top: -50px;
 693 }
 694 #contact-edit-drop-link .drop, .mail-list-delete-wrapper .drop, .group-delete-wrapper .drop {
 695   background-image: url('../../../images/icons/22/delete.png');
 696   display: block;
 697   width: 22px;
 698   height: 22px;
 699   position: relative;
 700   top: -50px;
 701 }
 702 /*
 703 #group-members {
 704         margin-top: 20px;
 705         padding: 10px;
 706         height: 250px;
 707         overflow: auto;
 708         border: 1px solid #ddd;
 709 }
 710 #group-members-end {
 711         clear: both;
 712 }
 713 #group-all-contacts {
 714         padding: 10px;
 715         height: 450px;
 716         overflow: auto;
 717         border: 1px solid #ddd;
 718 }
 719 #group-all-contacts-end {
 720         clear: both;
 721         margin-bottom: 10px;
 722 }
 723 .contact-block-div {
 724         float: left;
 725         width: 60px;
 726         height: 60px;
 727 }*/
 728 /* widget */
 729 .widget {
 730   margin-bottom: 2em;
 731   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 732         .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
 733
 734 }
 735 .widget h3 {
 736   padding: 0px;
 737   margin: 2px;
 738 }
 739 .widget .action {
 740   opacity: 0.1;
 741   -webkit-transition: all 0.2s ease-in-out;
 742   -moz-transition: all 0.2s ease-in-out;
 743   -o-transition: all 0.2s ease-in-out;
 744   -ms-transition: all 0.2s ease-in-out;
 745   transition: all 0.2s ease-in-out;
 746 }
 747 .widget input.action {
 748   opacity: 0.5;
 749   -webkit-transition: all 0.2s ease-in-out;
 750   -moz-transition: all 0.2s ease-in-out;
 751   -o-transition: all 0.2s ease-in-out;
 752   -ms-transition: all 0.2s ease-in-out;
 753   transition: all 0.2s ease-in-out;
 754 }
 755 .widget:hover .title .action {
 756   opacity: 1;
 757   -webkit-transition: all 0.2s ease-in-out;
 758   -moz-transition: all 0.2s ease-in-out;
 759   -o-transition: all 0.2s ease-in-out;
 760   -ms-transition: all 0.2s ease-in-out;
 761   transition: all 0.2s ease-in-out;
 762 }
 763 .widget .tool:hover .action {
 764   opacity: 1;
 765   -webkit-transition: all 0.2s ease-in-out;
 766   -moz-transition: all 0.2s ease-in-out;
 767   -o-transition: all 0.2s ease-in-out;
 768   -ms-transition: all 0.2s ease-in-out;
 769   transition: all 0.2s ease-in-out;
 770 }
 771 .widget .tool:hover .action.ticked {
 772   opacity: 1;
 773   -webkit-transition: all 0.2s ease-in-out;
 774   -moz-transition: all 0.2s ease-in-out;
 775   -o-transition: all 0.2s ease-in-out;
 776   -ms-transition: all 0.2s ease-in-out;
 777   transition: all 0.2s ease-in-out;
 778 }
 779 .widget ul {
 780   padding: 0px;
 781 }
 782 .widget ul li {
 783   padding-left: 16px;
 784   min-height: 16px;
 785   list-style: none;
 786 }
 787 .widget .tool.selected {
 788   background: url('../../../images/selected.png') no-repeat left center;
 789 }
 790 /* widget: search */
 791 #add-search-popup {
 792   width: 200px;
 793   top: 18px;
 794 }
 795 /* section 800px */
 796 section {
 797   display: table-cell;
 798   vertical-align: top;
 799   width: 770px;
 800   padding: 0px 20px 0px 10px;
 801 }
 802 /* wall item */
 803 .tread-wrapper {
 804   background-color: #eff0f1;
 805   position: relative;
 806   padding: 10px;
 807   margin-bottom: 20px;
 808   width: 750px;
 809   border-bottom: 1px solid #cccccc;
 810 }
 811 .wall-item-decor {
 812   position: absolute;
 813   left: 97%;
 814   top: -10px;
 815   width: 16px;
 816 }
 817 .unstarred {
 818   display: none;
 819 }
 820 .wall-item-container {
 821   display: table;
 822   width: 750px;
 823 }
 824 .wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom {
 825   display: table-row;
 826 }
 827 .wall-item-container .wall-item-bottom {
 828   opacity: 0.5;
 829   -webkit-transition: all 0.2s ease-in-out;
 830   -moz-transition: all 0.2s ease-in-out;
 831   -o-transition: all 0.2s ease-in-out;
 832   -ms-transition: all 0.2s ease-in-out;
 833   transition: all 0.2s ease-in-out;
 834 }
 835 .wall-item-container:hover .wall-item-bottom {
 836   opacity: 1;
 837   -webkit-transition: all 0.2s ease-in-out;
 838   -moz-transition: all 0.2s ease-in-out;
 839   -o-transition: all 0.2s ease-in-out;
 840   -ms-transition: all 0.2s ease-in-out;
 841   transition: all 0.2s ease-in-out;
 842 }
 843 .wall-item-container .wall-item-info {
 844   display: table-cell;
 845   vertical-align: top;
 846   text-align: left;
 847   width: 60px;
 848 }
 849 .wall-item-container .wall-item-location {
 850   word-wrap: break-word;
 851   width: 50px;
 852 }
 853 .wall-item-container .wall-item-content {
 854   display: table-cell;
 855   font-size: 12px;
 856   max-width: 720px;
 857   word-wrap: break-word;
 858 }
 859 .wall-item-container .wall-item-content img {
 860   max-width: 710px;
 861 }
 862 .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions {
 863   display: table-cell;
 864   vertical-align: middle;
 865 }
 866 .wall-item-container .wall-item-links .icon, .wall-item-container .wall-item-actions .icon {
 867   opacity: 0.5;
 868   -webkit-transition: all 0.2s ease-in-out;
 869   -moz-transition: all 0.2s ease-in-out;
 870   -o-transition: all 0.2s ease-in-out;
 871   -ms-transition: all 0.2s ease-in-out;
 872   transition: all 0.2s ease-in-out;
 873 }
 874 .wall-item-container .wall-item-links .icon:hover, .wall-item-container .wall-item-actions .icon:hover {
 875   opacity: 1;
 876   -webkit-transition: all 0.2s ease-in-out;
 877   -moz-transition: all 0.2s ease-in-out;
 878   -o-transition: all 0.2s ease-in-out;
 879   -ms-transition: all 0.2s ease-in-out;
 880   transition: all 0.2s ease-in-out;
 881 }
 882 .wall-item-container .wall-item-ago {
 883   padding-right: 40px;
 884 }
 885 .wall-item-container .wall-item-name {
 886   font-weight: bold;
 887 }
 888 .wall-item-container .wall-item-actions-author {
 889   float: left;
 890   width: 20em;
 891   margin-top: 0.5em;
 892 }
 893 .wall-item-container .wall-item-actions-social {
 894   float: left;
 895   margin-top: 0.5em;
 896 }
 897 .wall-item-container .wall-item-actions-social a {
 898   margin-right: 3em;
 899 }
 900 .wall-item-container .wall-item-actions-tools {
 901   float: right;
 902   width: 15%;
 903 }
 904 .wall-item-container .wall-item-actions-tools a {
 905   float: right;
 906 }
 907 .wall-item-container .wall-item-actions-tools input {
 908   float: right;
 909 }
 910 .wall-item-container.comment .contact-photo-wrapper {
 911   margin-left: 16px;
 912 }
 913 .wall-item-container.comment .contact-photo {
 914   width: 32px;
 915   height: 32px;
 916 }
 917 .wall-item-container.comment .contact-photo-menu-button {
 918   top: 15px !important;
 919   left: 0px !important;
 920 }
 921 .wall-item-container.comment .wall-item-links {
 922   padding-left: 12px;
 923 }
 924 /* 'tag' item type */
 925 .wall-item-container.item-tag .wall-item-content {
 926   opacity: 0.5;
 927   -webkit-transition: all 0.2s ease-in-out;
 928   -moz-transition: all 0.2s ease-in-out;
 929   -o-transition: all 0.2s ease-in-out;
 930   -ms-transition: all 0.2s ease-in-out;
 931   transition: all 0.2s ease-in-out;
 932 }
 933 .wall-item-container.item-tag .contact-photo-wrapper {
 934   margin-left: 32px;
 935 }
 936 .wall-item-container.item-tag .contact-photo {
 937   width: 16px;
 938   height: 16px;
 939 }
 940 .wall-item-container.item-tag .contact-photo-menu-button {
 941   top: 15px !important;
 942   left: 15px !important;
 943 }
 944 .wall-item-comment-wrapper {
 945   margin: 1em 2em 1em 60px;
 946 }
 947 .wall-item-comment-wrapper .comment-edit-photo {
 948   display: none;
 949 }
 950 .wall-item-comment-wrapper textarea {
 951   height: 1em;
 952   width: 100%;
 953   font-size: 10px;
 954   color: #999999;
 955   border: 1px solid #999999;
 956   padding: 0.3em;
 957 }
 958 .wall-item-comment-wrapper .comment-edit-text-full {
 959   font-size: 14px;
 960   height: 4em;
 961   color: #2d2d2d;
 962   border: 1px solid #2d2d2d;
 963 }
 964 .comment-edit-preview {
 965   width: 710px;
 966   border: 1px solid #2d2d2d;
 967   margin-top: 10px;
 968 }
 969 .comment-edit-preview .contact-photo {
 970   width: 32px;
 971   height: 32px;
 972   margin-left: 16px;
 973   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
 974
 975 }
 976 .comment-edit-preview .contact-photo-menu-button {
 977   top: 15px !important;
 978   left: 15px !important;
 979 }
 980 .comment-edit-preview .wall-item-links {
 981   padding-left: 12px;
 982 }
 983 .comment-edit-preview .wall-item-container {
 984   width: 700px;
 985 }
 986 .comment-edit-preview .tread-wrapper {
 987   width: 700px;
 988   padding: 0;
 989   margin: 10px 0;
 990 }
 991 .shiny {
 992   border-right: 10px solid #fce94f;
 993 }
 994 #jot-preview-content .tread-wrapper {
 995   background-color: #fce94f;
 996 }
 997 .hide-comments-outer {
 998   margin-bottom: 0.8em;
 999 }
1000 .wall-item-tags {
1001   padding-top: 5px;
1002 }
1003 .tag {
1004   background: url("../../../images/tag_b.png") no-repeat center left;
1005   color: #ffffff;
1006   padding-left: 3px;
1007 }
1008 .tag a {
1009   padding-right: 8px;
1010   background: url("../../../images/tag.png") no-repeat center right;
1011   color: #ffffff;
1012 }
1013 .filesavetags {
1014   padding: 3px 0px 3px 0px;
1015   opacity: 0.5;
1016 }
1017 .wwto {
1018   position: absolute !important;
1019   width: 25px;
1020   height: 25px;
1021   background: #FFFFFF;
1022   border: 2px solid #364e59;
1023   height: 25px;
1024   width: 25px;
1025   overflow: hidden;
1026   padding: 1px;
1027   position: absolute !important;
1028   top: 40px;
1029   left: 30px;
1030   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1031   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1032   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1033 }
1034 .wwto .contact-photo {
1035   width: 25px;
1036   height: 25px;
1037 }
1038 #pause {
1039   position: fixed;
1040   bottom: 5px;
1041   right: 5px;
1042 }
1043 .contact-photo-wrapper {
1044   position: relative;
1045 }
1046 .contact-photo {
1047   width: 48px;
1048   height: 48px;
1049   overflow: hidden;
1050   display: block;
1051 }
1052 .contact-photo img {
1053   width: 48px;
1054   height: 48px;
1055 }
1056 .contact-photo-menu-button {
1057   display: none;
1058   position: absolute;
1059   left: -2px;
1060   top: 31px;
1061 }
1062 .contact-wrapper {
1063   float: left;
1064   width: 300px;
1065   height: 90px;
1066   padding-right: 10px;
1067   margin: 0 10px 10px 0px;
1068 }
1069 .contact-wrapper .contact-photo-wrapper {
1070   float: left;
1071   margin-right: 10px;
1072 }
1073 .contact-wrapper .contact-photo {
1074   width: 80px;
1075   height: 80px;
1076 }
1077 .contact-wrapper .contact-photo img {
1078   width: 80px;
1079   height: 80px;
1080 }
1081 .contact-wrapper .contact-photo-menu-button {
1082   left: 0px;
1083   top: 63px;
1084 }
1085 .directory-item {
1086   float: left;
1087   width: 200px;
1088   height: 200px;
1089 }
1090 .directory-item .contact-photo {
1091   width: 175px;
1092   height: 175px;
1093 }
1094 .directory-item .contact-photo img {
1095   width: 175px;
1096   height: 175px;
1097 }
1098 .contact-name {
1099   font-weight: bold;
1100   padding-top: 15px;
1101 }
1102 .contact-details {
1103   color: #999999;
1104   white-space: nowrap;
1105   overflow: hidden;
1106   text-overflow: ellipsis;
1107 }
1108 /* editor */
1109 .jothidden {
1110   display: none;
1111 }
1112 #jot {
1113   width: 100%;
1114   margin: 0px 2em 20px 0px;
1115 }
1116 #jot .profile-jot-text {
1117   height: 1em;
1118   width: 99%;
1119   font-size: 10px;
1120   color: #999999;
1121   border: 1px solid #999999;
1122   padding: 0.3em;
1123 }
1124 #jot #jot-tools {
1125   margin: 0px;
1126   padding: 0px;
1127   height: 40px;
1128   overflow: none;
1129   width: 770px;
1130   background-color: #0e232e;
1131   border-bottom: 2px solid #9eabb0;
1132 }
1133 #jot #jot-tools li {
1134   list-style: none;
1135   float: left;
1136   width: 80px;
1137   height: 40px;
1138   border-bottom: 2px solid #9eabb0;
1139 }
1140 #jot #jot-tools li a {
1141   display: block;
1142   color: #cccccc;
1143   width: 100%;
1144   height: 40px;
1145   text-align: center;
1146   line-height: 40px;
1147   overflow: hidden;
1148 }
1149 #jot #jot-tools li:hover {
1150   background-color: #364e59;
1151   border-bottom: 2px solid #bdcdd4;
1152 }
1153 #jot #jot-tools li.perms {
1154   float: right;
1155   width: 40px;
1156 }
1157 #jot #jot-tools li.perms a.unlock {
1158   width: 30px;
1159   border-left: 10px solid #cccccc;
1160   background-color: #cccccc;
1161 }
1162 #jot #jot-tools li.perms a.lock {
1163   width: 30px;
1164   border-left: 10px solid #666666;
1165   background-color: #666666;
1166 }
1167 #jot #jot-tools li.submit {
1168   float: right;
1169   background-color: #cccccc;
1170   border-bottom: 2px solid #cccccc;
1171   border-right: 1px solid #666666;
1172   border-left: 1px solid #666666;
1173 }
1174 #jot #jot-tools li.submit input {
1175   border: 0px;
1176   margin: 0px;
1177   padding: 0px;
1178   background-color: #cccccc;
1179   color: #666666;
1180   width: 80px;
1181   height: 40px;
1182   line-height: 40px;
1183 }
1184 #jot #jot-tools li.submit input:hover {
1185   background-color: #bdcdd4;
1186   color: #666666;
1187 }
1188 #jot #jot-tools li.loading {
1189   float: right;
1190   background-color: #ffffff;
1191   width: 20px;
1192   vertical-align: center;
1193   text-align: center;
1194   border-top: 2px solid #9eabb0;
1195   height: 38px;
1196 }
1197 #jot #jot-tools li.loading img {
1198   margin-top: 10px;
1199 }
1200 #jot #jot-title {
1201   border: 0px;
1202   margin: 0px;
1203   height: 20px;
1204   width: 500px;
1205   font-weight: bold;
1206   border: 1px solid #ffffff;
1207 }
1208 #jot #jot-title:-webkit-input-placeholder {
1209   font-weight: normal;
1210 }
1211 #jot #jot-title:-moz-placeholder {
1212   font-weight: normal;
1213 }
1214 #jot #jot-title:hover {
1215   border: 1px solid #999999;
1216 }
1217 #jot #jot-title:focus {
1218   border: 1px solid #999999;
1219 }
1220 #jot #character-counter {
1221   width: 40px;
1222   float: right;
1223   text-align: right;
1224   height: 20px;
1225   line-height: 20px;
1226   padding-right: 20px;
1227 }
1228 #jot #jot-category {
1229   border: 0px;
1230   margin: 0px;
1231   height: 20px;
1232   width: 200px;
1233   border: 1px solid #ffffff;
1234 }
1235 #jot #jot-category:hover {
1236   border: 1px solid #999999;
1237 }
1238 #jot #jot-category:focus {
1239   border: 1px solid #999999;
1240 }
1241 /** buttons **/
1242 /*input[type="submit"] {
1243         border: 0px;
1244     background-color: @ButtonBackgroundColor;
1245     color: @ButtonColor;
1246     padding: 0px 10px;
1247         .rounded(5px);
1248     height: 18px;
1249 }*/
1250 /** acl **/
1251 #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper {
1252   display: block!important;
1253 }
1254 #acl-wrapper {
1255   width: 690px;
1256   float: left;
1257 }
1258 #acl-search {
1259   float: right;
1260   background: #ffffff url("../../../images/search_18.png") no-repeat right center;
1261   padding-right: 20px;
1262 }
1263 #acl-showall {
1264   float: left;
1265   display: block;
1266   width: auto;
1267   height: 18px;
1268   background-color: #cccccc;
1269   background-image: url("../../../images/show_all_off.png");
1270   background-position: 7px 7px;
1271   background-repeat: no-repeat;
1272   padding: 7px 5px 0px 30px;
1273   color: #999999;
1274   -moz-border-radius: 5px 5px 5px 5px;
1275   -webkit-border-radius: 5px 5px 5px 5px;
1276   border-radius: 5px 5px 5px 5px;
1277 }
1278 #acl-showall.selected {
1279   color: #000000;
1280   background-color: #ff9900;
1281   background-image: url("../../../images/show_all_on.png");
1282 }
1283 #acl-list {
1284   height: 210px;
1285   border: 1px solid #cccccc;
1286   clear: both;
1287   margin-top: 30px;
1288   overflow: auto;
1289 }
1290 .acl-list-item {
1291   display: block;
1292   width: 150px;
1293   height: 30px;
1294   border: 1px solid #cccccc;
1295   margin: 5px;
1296   float: left;
1297 }
1298 .acl-list-item img {
1299   width: 22px;
1300   height: 22px;
1301   float: left;
1302   margin: 4px;
1303 }
1304 .acl-list-item p {
1305   height: 12px;
1306   font-size: 10px;
1307   margin: 0px;
1308   padding: 2px 0px 1px;
1309   overflow: hidden;
1310 }
1311 .acl-list-item a {
1312   font-size: 8px;
1313   display: block;
1314   width: 40px;
1315   height: 10px;
1316   float: left;
1317   color: #999999;
1318   background-color: #cccccc;
1319   background-position: 3px 3px;
1320   background-repeat: no-repeat;
1321   margin-right: 5px;
1322   -webkit-border-radius: 2px ;
1323   -moz-border-radius: 2px;
1324   border-radius: 2px;
1325   padding-left: 15px;
1326 }
1327 #acl-wrapper a:hover {
1328   text-decoration: none;
1329   color: #000000;
1330 }
1331 .acl-button-show {
1332   background-image: url("../../../images/show_off.png");
1333 }
1334 .acl-button-hide {
1335   background-image: url("../../../images/hide_off.png");
1336 }
1337 .acl-button-show.selected {
1338   color: #000000;
1339   background-color: #9ade00;
1340   background-image: url("../../../images/show_on.png");
1341 }
1342 .acl-button-hide.selected {
1343   color: #000000;
1344   background-color: #ff4141;
1345   background-image: url("../../../images/hide_on.png");
1346 }
1347 .acl-list-item.groupshow {
1348   border-color: #9ade00;
1349 }
1350 .acl-list-item.grouphide {
1351   border-color: #ff4141;
1352 }
1353 /** /acl **/
1354 /** tab buttons **/
1355 ul.tabs {
1356   list-style-type: none;
1357   padding-bottom: 10px;
1358 }
1359 ul.tabs li {
1360   float: left;
1361   margin-left: 20px;
1362 }
1363 ul.tabs li .active {
1364   border-bottom: 1px solid #005c94;
1365 }
1366 /** group editor **/
1367 #group-edit-desc {
1368   margin-top: 1em;
1369   color: #999999;
1370 }
1371 #group-update-wrapper {
1372   height: auto;
1373   overflow: auto;
1374 }
1375 #group-update-wrapper #group {
1376   width: 300px;
1377   float: left;
1378   margin-right: 20px;
1379 }
1380 #group-update-wrapper #contacts {
1381   width: 300px;
1382   float: left;
1383 }
1384 #group-update-wrapper #group-separator {
1385   display: none;
1386 }
1387 #group-update-wrapper .contact_list {
1388   height: 300px;
1389   border: 1px solid #364e59;
1390   overflow: auto;
1391 }
1392 #group-update-wrapper .contact_list .contact-block-div {
1393   width: 50px;
1394   height: 50px;
1395   float: left;
1396 }
1397 /**
1398  * Form fields
1399  */
1400 .field {
1401   margin-bottom: 10px;
1402   padding-bottom: 10px;
1403   overflow: auto;
1404   width: 100%;
1405 }
1406 .field label {
1407   float: left;
1408   width: 200px;
1409 }
1410 .field input, .field textarea {
1411   width: 400px;
1412 }
1413 .field input[type="checkbox"], .field input[type="radio"] {
1414   width: auto;
1415 }
1416 .field textarea {
1417   height: 100px;
1418 }
1419 .field .field_help {
1420   display: block;
1421   margin-left: 200px;
1422   color: #999999;
1423 }
1424 .field .onoff {
1425   float: left;
1426   width: 80px;
1427 }
1428 .field .onoff a {
1429   display: block;
1430   border: 1px solid #666666;
1431   background-image: url("../../../images/onoff.jpg");
1432   background-repeat: no-repeat;
1433   padding: 4px 2px 2px 2px;
1434   height: 16px;
1435   text-decoration: none;
1436 }
1437 .field .onoff .off {
1438   border-color: #666666;
1439   padding-left: 40px;
1440   background-position: left center;
1441   background-color: #cccccc;
1442   color: #666666;
1443   text-align: right;
1444 }
1445 .field .onoff .on {
1446   border-color: #204A87;
1447   padding-right: 40px;
1448   background-position: right center;
1449   background-color: #D7E3F1;
1450   color: #204A87;
1451   text-align: left;
1452 }
1453 .field .hidden {
1454   display: none!important;
1455 }
1456 .field.radio .field_help {
1457   margin-left: 0px;
1458 }
1459 #profile-edit-links li {
1460   list-style: none;
1461   margin-top: 10px;
1462 }
1463 #profile-edit-default-desc {
1464   color: #FF0000;
1465   border: 1px solid #FF8888;
1466   background-color: #FFEEEE;
1467   padding: 7px;
1468 }
1469 #profile-edit-profile-name-label,
1470 #profile-edit-name-label,
1471 #profile-edit-pdesc-label,
1472 #profile-edit-gender-label,
1473 #profile-edit-dob-label,
1474 #profile-edit-address-label,
1475 #profile-edit-locality-label,
1476 #profile-edit-region-label,
1477 #profile-edit-postal-code-label,
1478 #profile-edit-country-name-label,
1479 #profile-edit-marital-label,
1480 #profile-edit-with-label,
1481 #profile-edit-sexual-label,
1482 #profile-edit-politic-label,
1483 #profile-edit-religion-label,
1484 #profile-edit-pubkeywords-label,
1485 #profile-edit-prvkeywords-label,
1486 #profile-edit-gender-select,
1487 #profile-edit-homepage-label {
1488   float: left;
1489   width: 175px;
1490   padding-top: 7px;
1491 }
1492 #profile-edit-profile-name,
1493 #profile-edit-name,
1494 #gender-select,
1495 #profile-edit-pdesc,
1496 #profile-edit-gender,
1497 #profile-edit-dob,
1498 #profile-edit-address,
1499 #profile-edit-locality,
1500 #profile-edit-region,
1501 #profile-edit-postal-code,
1502 #profile-edit-country-name,
1503 #profile-edit-marital,
1504 #profile-edit-with,
1505 #profile-edit-sexual,
1506 #profile-edit-politic,
1507 #profile-edit-religion,
1508 #profile-edit-pubkeywords,
1509 #profile-edit-prvkeywords,
1510 #profile-edit-homepage {
1511   margin-top: 5px;
1512 }
1513 /* oauth */
1514 .oauthapp {
1515   height: auto;
1516   overflow: auto;
1517   border-bottom: 2px solid #cccccc;
1518   padding-bottom: 1em;
1519   margin-bottom: 1em;
1520 }
1521 .oauthapp img {
1522   float: left;
1523   width: 48px;
1524   height: 48px;
1525   margin: 10px;
1526 }
1527 .oauthapp img.noicon {
1528   background-image: url("../../../images/icons/48/plugin.png");
1529   background-position: center center;
1530   background-repeat: no-repeat;
1531 }
1532 .oauthapp a {
1533   float: left;
1534 }
1535 /* contacts */
1536 .contact-entry-wrapper {
1537   width: 50px;
1538   float: left;
1539 }
1540 /* photo */
1541 .lframe {
1542   float: left;
1543   margin: 0px 10px 10px 0px;
1544 }
1545 /* profile match wrapper */
1546 .profile-match-wrapper {
1547   float: left;
1548   width: 90px;
1549   height: 90px;
1550   margin-bottom: 20px;
1551 }
1552 .profile-match-wrapper .contact-photo {
1553   width: 80px;
1554   height: 80px;
1555 }
1556 .profile-match-wrapper .contact-photo img {
1557   width: 80px;
1558   height: 80px;
1559 }
1560 .profile-match-wrapper .contact-photo-menu-button {
1561   left: 0px;
1562   top: 63px;
1563 }
1564 /* messages */
1565 #message-new {
1566   background: #19aeff;
1567   border: 1px solid #005c94;
1568   width: 150px;
1569 }
1570 #message-new a {
1571   color: #ffffff;
1572   text-align: center;
1573   display: block;
1574   font-weight: bold;
1575   padding: 1em 0px;
1576 }
1577 .mail-list-wrapper {
1578   background-color: #f6f7f8;
1579   margin-bottom: 5px;
1580   width: 100%;
1581   height: auto;
1582   overflow: hidden;
1583 }
1584 .mail-list-wrapper span {
1585   display: block;
1586   float: left;
1587   width: 20%;
1588   overflow: hidden;
1589 }
1590 .mail-list-wrapper .mail-subject {
1591   width: 30%;
1592   padding: 4px 0px 0px 4px;
1593 }
1594 .mail-list-wrapper .mail-subject a {
1595   display: block;
1596 }
1597 .mail-list-wrapper .mail-subject.unseen a {
1598   font-weight: bold;
1599 }
1600 .mail-list-wrapper .mail-date {
1601   padding: 4px 4px 0px 4px;
1602 }
1603 .mail-list-wrapper .mail-from {
1604   padding: 4px 4px 0px 4px;
1605 }
1606 .mail-list-wrapper .mail-count {
1607   padding: 4px 4px 0px 4px;
1608   text-align: right;
1609 }
1610 .mail-list-wrapper .mail-delete {
1611   float: right;
1612 }
1613 #mail-display-subject {
1614   background-color: #f6f7f8;
1615   color: #2d2d2d;
1616   margin-bottom: 10px;
1617   width: 100%;
1618   height: auto;
1619   overflow: hidden;
1620 }
1621 #mail-display-subject span {
1622   float: left;
1623   overflow: hidden;
1624   padding: 4px 0px 0px 10px;
1625 }
1626 #mail-display-subject .mail-delete {
1627   float: right;
1628   opacity: 0.5;
1629   -webkit-transition: all 0.2s ease-in-out;
1630   -moz-transition: all 0.2s ease-in-out;
1631   -o-transition: all 0.2s ease-in-out;
1632   -ms-transition: all 0.2s ease-in-out;
1633   transition: all 0.2s ease-in-out;
1634 }
1635 #mail-display-subject:hover .mail-delete {
1636   opacity: 1;
1637   -webkit-transition: all 0.2s ease-in-out;
1638   -moz-transition: all 0.2s ease-in-out;
1639   -o-transition: all 0.2s ease-in-out;
1640   -ms-transition: all 0.2s ease-in-out;
1641   transition: all 0.2s ease-in-out;
1642 }
1643 /* theme screenshot */
1644 .screenshot, #theme-preview {
1645   position: absolute;
1646   width: 202px;
1647   left: 70%;
1648   top: 50px;
1649 }
1650 .screenshot img, #theme-preview img {
1651   width: 200px;
1652   height: 150px;
1653 }
1654 /* page footer */
1655 footer {
1656   height: 100px;
1657   display: table-row;
1658 }
1659 .pager {
1660   margin-top: 25px;
1661   clear: both;
1662 }
1663 /**
1664  * ADMIN
1665  */
1666 #pending-update {
1667   float: right;
1668   color: #ffffff;
1669   font-weight: bold;
1670   background-color: #FF0000;
1671   padding: 0em 0.3em;
1672 }
1673 #adminpage dl {
1674   clear: left;
1675   margin-bottom: 2px;
1676   padding-bottom: 2px;
1677   border-bottom: 1px solid black;
1678 }
1679 #adminpage dt {
1680   width: 200px;
1681   float: left;
1682   font-weight: bold;
1683 }
1684 #adminpage dd {
1685   margin-left: 200px;
1686 }
1687 #adminpage h3 {
1688   border-bottom: 1px solid #cccccc;
1689 }
1690 #adminpage .field label {
1691   font-weight: bold;
1692 }
1693 #adminpage .submit {
1694   clear: left;
1695   text-align: right;
1696 }
1697 #adminpage #pluginslist {
1698   margin: 0px;
1699   padding: 0px;
1700 }
1701 #adminpage .plugin {
1702   list-style: none;
1703   display: block;
1704   border: 1px solid #888888;
1705   padding: 1em;
1706   margin-bottom: 5px;
1707   clear: left;
1708 }
1709 #adminpage .plugin desc {
1710   margin-left: 2.5em;
1711 }
1712 #adminpage .toggleplugin {
1713   float: left;
1714   margin-right: 1em;
1715 }
1716 #adminpage table {
1717   width: 100%;
1718   border-bottom: 1px solid #000000;
1719   margin: 5px 0px;
1720 }
1721 #adminpage table th {
1722   text-align: left;
1723 }
1724 #adminpage table td .icon {
1725   float: left;
1726 }
1727 #adminpage table tr:hover {
1728   background-color: #bbc7d7;
1729 }
1730 #adminpage table#users img {
1731   width: 16px;
1732   height: 16px;
1733 }
1734 #adminpage .selectall {
1735   text-align: right;
1736 }
1737 /* edit buttons for comments */
1738 .icon.dim {
1739   opacity: 0.3;
1740   filter: alpha(opacity=30);
1741 }
1742 [class^="comment-edit-bb"] {
1743   list-style: none;
1744   display: none;
1745   margin: 0px 0 0px 60px;
1746   width: 75%;
1747 }
1748 [class^="comment-edit-bb"] > li {
1749   display: inline-block;
1750   margin: 10px 10px 0 0;
1751   visibility: none;
1752 }
1753 [class^="comment-edit-bb-end"] {
1754   clear: both;
1755 }
1756 .editicon {
1757   display: inline-block;
1758   width: 16px;
1759   height: 16px;
1760   background-image: url(bbedit.png);
1761   text-decoration: none;
1762 }
1763 .editicon :hover {
1764   background-color: #ccc;
1765 }
1766 .boldbb {
1767   background-position: 0px 0px;
1768 }
1769 .boldbb:hover {
1770   background-position: 0px -16px;
1771 }
1772 .italicbb {
1773   background-position: -16px 0px;
1774 }
1775 .italicbb:hover {
1776   background-position: -16px -16px;
1777 }
1778 .underlinebb {
1779   background-position: -32px 0px;
1780 }
1781 .underlinebb:hover {
1782   background-position: -32px -16px;
1783 }
1784 .quotebb {
1785   background-position: -48px 0px;
1786 }
1787 .quotebb:hover {
1788   background-position: -48px -16px;
1789 }
1790 .codebb {
1791   background-position: -64px 0px;
1792 }
1793 .codebb:hover {
1794   background-position: -64px -16px;
1795 }
1796 .imagebb {
1797   background-position: -80px 0px;
1798 }
1799 .imagebb:hover {
1800   background-position: -80px -16px;
1801 }
1802 .urlbb {
1803   background-position: -96px 0px;
1804 }
1805 .urlbb:hover {
1806   background-position: -96px -16px;
1807 }
1808 .videobb {
1809   background-position: -112px 0px;
1810 }
1811 .videobb:hover {
1812   background-position: -112px -16px;
1813 }
1814 .attachtype {
1815   display: block;
1816   width: 20px;
1817   height: 23px;
1818   float: left;
1819   background-image: url('../../../images/content-types.png');
1820 }
1821 .body-attach {
1822   margin-top: 10px;
1823 }
1824 .type-video {
1825   background-position: 0px 0px;
1826 }
1827 .type-image {
1828   background-position: -20px 0px;
1829 }
1830 .type-audio {
1831   background-position: -40px 0px;
1832 }
1833 .type-text {
1834   background-position: -60px 0px;
1835 }
1836 .type-unkn {
1837   background-position: -80px 0px;
1838 }