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