view/theme/quattro/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, a:link {
 235   color: #005c94;
 236   text-decoration: none;
 237 }
 238 a:visited {
 239   color: #005c94;
 240   text-decoration: none;
 241 }
 242 a:hover {
 243   color: #005c94;
 244   text-decoration: underline;
 245 }
 246 .left {
 247   float: left;
 248 }
 249 .right {
 250   float: right;
 251 }
 252 .hidden {
 253   display: none;
 254 }
 255 .clear {
 256   clear: both;
 257 }
 258 .fakelink {
 259   color: #005c94;
 260   text-decoration: none;
 261   cursor: pointer;
 262 }
 263 .fakelink:hover {
 264   color: #005c94;
 265   text-decoration: underline;
 266 }
 267 code {
 268   font-family: Courier, monospace;
 269   white-space: pre;
 270   display: block;
 271   overflow: auto;
 272   border: 1px solid #444;
 273   background: #EEE;
 274   color: #444;
 275   padding: 10px;
 276   margin-top: 20px;
 277 }
 278 #panel {
 279   position: absolute;
 280   width: 10em;
 281   background: #ffffff;
 282   color: #2d2d2d;
 283   margin: 0px;
 284   padding: 1em;
 285   list-style: none;
 286   border: 3px solid #364e59;
 287   z-index: 100000;
 288   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 289   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 290   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 291 }
 292 /* tool */
 293 .tool {
 294   height: auto;
 295   overflow: auto;
 296 }
 297 .tool .label {
 298   float: left;
 299 }
 300 .tool .action {
 301   float: right;
 302 }
 303 /* popup notifications */
 304 div.jGrowl div.notice {
 305   background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 306   color: #ffffff;
 307   padding-left: 58px;
 308 }
 309 div.jGrowl div.info {
 310   background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 311   color: #ffffff;
 312   padding-left: 58px;
 313 }
 314 /* header */
 315 header {
 316   position: fixed;
 317   left: 43%;
 318   right: 43%;
 319   top: 0px;
 320   margin: 0px;
 321   padding: 0px;
 322   /*width: 100%; height: 12px; */
 323
 324   z-index: 110;
 325   color: #ffffff;
 326 }
 327 header #site-location {
 328   display: none;
 329 }
 330 header #banner {
 331   overflow: hidden;
 332   text-align: center;
 333   width: 100%;
 334 }
 335 header #banner a,
 336 header #banner a:active,
 337 header #banner a:visited,
 338 header #banner a:link,
 339 header #banner a:hover {
 340   color: #ffffff;
 341   text-decoration: none;
 342   outline: none;
 343   vertical-align: bottom;
 344 }
 345 header #banner #logo-img {
 346   height: 22px;
 347   margin-top: 5px;
 348 }
 349 header #banner #logo-text {
 350   font-size: 22px;
 351 }
 352 /* nav */
 353 nav {
 354   width: 100%;
 355   height: 32px;
 356   position: fixed;
 357   left: 0px;
 358   top: 0px;
 359   padding: 0px;
 360   background-color: #0e232e;
 361   color: #ffffff;
 362   z-index: 100;
 363   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 364   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 365   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 366 }
 367 nav a,
 368 nav a:active,
 369 nav a:visited,
 370 nav a:link,
 371 nav a:hover {
 372   color: #ffffff;
 373   text-decoration: none;
 374   outline: none;
 375 }
 376 nav ul {
 377   margin: 0px;
 378   padding: 0px 20px;
 379 }
 380 nav ul li {
 381   list-style: none;
 382   margin: 0px;
 383   padding: 0px;
 384   float: left;
 385 }
 386 nav ul li .menu-popup {
 387   left: 0px;
 388   right: auto;
 389 }
 390 nav .nav-menu-icon {
 391   position: relative;
 392   height: 22px;
 393   padding: 5px;
 394   margin: 0px 10px;
 395   -moz-border-radius: 5px 5px 0 0;
 396   -webkit-border-radius: 5px 5px 0 0;
 397   border-radius: 5px 5px 0 0;
 398 }
 399 nav .nav-menu-icon.selected {
 400   background-color: #364e59;
 401 }
 402 nav .nav-menu-icon img {
 403   width: 22px;
 404   height: 22px;
 405 }
 406 nav .nav-menu-icon .nav-notify {
 407   top: 3px;
 408 }
 409 nav .nav-menu {
 410   position: relative;
 411   height: 16px;
 412   padding: 5px;
 413   margin: 3px 15px 0px;
 414   font-size: 14px;
 415   border-bottom: 3px solid #0e232e;
 416 }
 417 nav .nav-menu.selected {
 418   border-bottom: 3px solid #9eabb0;
 419 }
 420 nav .nav-notify {
 421   display: none;
 422   position: absolute;
 423   background-color: #19aeff;
 424   -moz-border-radius: 5px 5px 5px 5px;
 425   -webkit-border-radius: 5px 5px 5px 5px;
 426   border-radius: 5px 5px 5px 5px;
 427   font-size: 10px;
 428   padding: 1px 3px;
 429   top: 0px;
 430   right: -10px;
 431   min-width: 15px;
 432   text-align: right;
 433 }
 434 nav .nav-notify.show {
 435   display: block;
 436 }
 437 nav #nav-help-link,
 438 nav #nav-search-link,
 439 nav #nav-directory-link,
 440 nav #nav-apps-link,
 441 nav #nav-site-linkmenu {
 442   float: right;
 443 }
 444 nav #nav-help-link .menu-popup,
 445 nav #nav-search-link .menu-popup,
 446 nav #nav-directory-link .menu-popup,
 447 nav #nav-apps-link .menu-popup,
 448 nav #nav-site-linkmenu .menu-popup {
 449   right: 0px;
 450   left: auto;
 451 }
 452 nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 453   background-image: url("../../../images/icons/22/notify_on.png");
 454 }
 455 nav #nav-apps-link.selected {
 456   background-color: #364e59;
 457 }
 458 ul.menu-popup {
 459   position: absolute;
 460   display: none;
 461   width: 10em;
 462   background: #ffffff;
 463   color: #2d2d2d;
 464   margin: 0px;
 465   padding: 0px;
 466   list-style: none;
 467   border: 3px solid #364e59;
 468   z-index: 100000;
 469   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 470   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 471   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 472 }
 473 ul.menu-popup a {
 474   display: block;
 475   color: #2d2d2d;
 476   padding: 5px 10px;
 477   text-decoration: none;
 478 }
 479 ul.menu-popup a:hover {
 480   background-color: #bdcdd4;
 481 }
 482 ul.menu-popup .menu-sep {
 483   border-top: 1px solid #9eabb0;
 484 }
 485 ul.menu-popup li {
 486   float: none;
 487   overflow: auto;
 488   height: auto;
 489   display: block;
 490 }
 491 ul.menu-popup li img {
 492   float: left;
 493   width: 16px;
 494   height: 16px;
 495   padding-right: 5px;
 496 }
 497 ul.menu-popup .empty {
 498   padding: 5px;
 499   text-align: center;
 500   color: #9eabb0;
 501 }
 502 /* autocomplete popup */
 503 .acpopup {
 504   max-height: 150px;
 505   background-color: #ffffff;
 506   color: #2d2d2d;
 507   border: 1px solid #MenuBorder;
 508   overflow: auto;
 509   z-index: 100000;
 510   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 511   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 512   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 513 }
 514 .acpopupitem {
 515   color: #2d2d2d;
 516   padding: 4px;
 517   clear: left;
 518 }
 519 .acpopupitem img {
 520   float: left;
 521   margin-right: 4px;
 522 }
 523 .acpopupitem.selected {
 524   background-color: #bdcdd4;
 525 }
 526 #nav-notifications-menu {
 527   width: 400px;
 528   max-height: 550px;
 529   overflow: auto;
 530 }
 531 #nav-notifications-menu img {
 532   float: left;
 533   margin-right: 5px;
 534 }
 535 #nav-notifications-menu .contactname {
 536   font-weight: bold;
 537 }
 538 #nav-notifications-menu .notif-when {
 539   font-size: 10px;
 540   color: #9eabb0;
 541   display: block;
 542 }
 543 /* aside */
 544 aside {
 545   display: table-cell;
 546   vertical-align: top;
 547   width: 200px;
 548   padding: 0px 10px 0px 20px;
 549   border-right: 1px solid #bdcdd4;
 550 }
 551 aside .vcard .fn {
 552   font-size: 16px;
 553   font-weight: bold;
 554   margin-bottom: 5px;
 555 }
 556 aside .vcard .title {
 557   margin-bottom: 5px;
 558 }
 559 aside .vcard dl {
 560   height: auto;
 561   overflow: auto;
 562 }
 563 aside .vcard dt {
 564   float: left;
 565   margin-left: 0px;
 566   width: 35%;
 567   text-align: right;
 568   color: #999999;
 569 }
 570 aside .vcard dd {
 571   float: left;
 572   margin-left: 4px;
 573   width: 60%;
 574 }
 575 aside #profile-extra-links ul {
 576   padding: 0px;
 577   margin: 0px;
 578 }
 579 aside #profile-extra-links li {
 580   padding: 0px;
 581   margin: 0px;
 582   list-style: none;
 583 }
 584 aside #dfrn-request-link {
 585   display: block;
 586   -moz-border-radius: 5px 5px 5px 5px;
 587   -webkit-border-radius: 5px 5px 5px 5px;
 588   border-radius: 5px 5px 5px 5px;
 589   color: #ffffff;
 590   background: #005c94 url('../../../images/connect-bg.png') no-repeat left center;
 591   font-weight: bold;
 592   text-transform: uppercase;
 593   padding: 4px 2px 2px 35px;
 594 }
 595 aside #dfrn-request-link:hover {
 596   text-decoration: none;
 597   background-color: #19aeff;
 598 }
 599 aside #profiles-menu {
 600   width: 20em;
 601 }
 602 #contact-block {
 603   overflow: auto;
 604   height: auto;
 605 }
 606 #contact-block .contact-block-h4 {
 607   float: left;
 608   margin: 5px 0px;
 609 }
 610 #contact-block .allcontact-link {
 611   float: right;
 612   margin: 5px 0px;
 613 }
 614 #contact-block .contact-block-content {
 615   clear: both;
 616   overflow: auto;
 617   height: auto;
 618 }
 619 #contact-block .contact-block-link {
 620   float: left;
 621   margin: 0px 2px 2px 0px;
 622 }
 623 #contact-block .contact-block-link img {
 624   widht: 48px;
 625   height: 58px;
 626 }
 627 /* mail view */
 628 .mail-conv-sender, .mail-conv-detail {
 629   float: left;
 630 }
 631 .mail-conv-detail {
 632   margin-left: 20px;
 633   width: 500px;
 634 }
 635 .mail-conv-subject {
 636   font-size: 1.4em;
 637   margin: 10px 0;
 638 }
 639 .mail-conv-outside-wrapper-end {
 640   clear: both;
 641 }
 642 .mail-conv-outside-wrapper {
 643   margin-top: 30px;
 644 }
 645 .mail-conv-delete-wrapper {
 646   float: right;
 647   margin-right: 30px;
 648   margin-top: 15px;
 649 }
 650 .mail-conv-break {
 651   clear: both;
 652 }
 653 .mail-conv-delete-icon {
 654   border: none;
 655 }
 656 /* group member */
 657 #contact-edit-drop-link, .mail-list-delete-wrapper, .group-delete-wrapper {
 658   float: right;
 659   margin-right: 50px;
 660 }
 661 #contact-edit-drop-link .drophide, .mail-list-delete-wrapper .drophide, .group-delete-wrapper .drophide {
 662   background-image: url('../../../images/icons/22/delete.png');
 663   display: block;
 664   width: 22px;
 665   height: 22px;
 666   opacity: 0.3;
 667   position: relative;
 668   top: -50px;
 669 }
 670 #contact-edit-drop-link .drop, .mail-list-delete-wrapper .drop, .group-delete-wrapper .drop {
 671   background-image: url('../../../images/icons/22/delete.png');
 672   display: block;
 673   width: 22px;
 674   height: 22px;
 675   position: relative;
 676   top: -50px;
 677 }
 678 #group-members {
 679   margin-top: 20px;
 680   padding: 10px;
 681   height: 250px;
 682   overflow: auto;
 683   border: 1px solid #ddd;
 684 }
 685 #group-members-end {
 686   clear: both;
 687 }
 688 #group-all-contacts {
 689   padding: 10px;
 690   height: 450px;
 691   overflow: auto;
 692   border: 1px solid #ddd;
 693 }
 694 #group-all-contacts-end {
 695   clear: both;
 696   margin-bottom: 10px;
 697 }
 698 .contact-block-div {
 699   float: left;
 700   width: 52px;
 701   height: 52px;
 702 }
 703 /* widget */
 704 .widget {
 705   margin-bottom: 2em;
 706   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 707         .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
 708
 709 }
 710 .widget h3 {
 711   padding: 0px;
 712   margin: 2px;
 713 }
 714 .widget .action {
 715   opacity: 0.1;
 716   -webkit-transition: all 0.2s ease-in-out;
 717   -moz-transition: all 0.2s ease-in-out;
 718   -o-transition: all 0.2s ease-in-out;
 719   -ms-transition: all 0.2s ease-in-out;
 720   transition: all 0.2s ease-in-out;
 721 }
 722 .widget input.action {
 723   opacity: 0.5;
 724   -webkit-transition: all 0.2s ease-in-out;
 725   -moz-transition: all 0.2s ease-in-out;
 726   -o-transition: all 0.2s ease-in-out;
 727   -ms-transition: all 0.2s ease-in-out;
 728   transition: all 0.2s ease-in-out;
 729 }
 730 .widget:hover .title .action {
 731   opacity: 1;
 732   -webkit-transition: all 0.2s ease-in-out;
 733   -moz-transition: all 0.2s ease-in-out;
 734   -o-transition: all 0.2s ease-in-out;
 735   -ms-transition: all 0.2s ease-in-out;
 736   transition: all 0.2s ease-in-out;
 737 }
 738 .widget .tool:hover .action {
 739   opacity: 1;
 740   -webkit-transition: all 0.2s ease-in-out;
 741   -moz-transition: all 0.2s ease-in-out;
 742   -o-transition: all 0.2s ease-in-out;
 743   -ms-transition: all 0.2s ease-in-out;
 744   transition: all 0.2s ease-in-out;
 745 }
 746 .widget .tool:hover .action.ticked {
 747   opacity: 1;
 748   -webkit-transition: all 0.2s ease-in-out;
 749   -moz-transition: all 0.2s ease-in-out;
 750   -o-transition: all 0.2s ease-in-out;
 751   -ms-transition: all 0.2s ease-in-out;
 752   transition: all 0.2s ease-in-out;
 753 }
 754 .widget ul {
 755   padding: 0px;
 756 }
 757 .widget ul li {
 758   padding-left: 16px;
 759   min-height: 16px;
 760   list-style: none;
 761 }
 762 .widget .tool.selected {
 763   background: url('../../../images/selected.png') no-repeat left center;
 764 }
 765 /* widget: search */
 766 #add-search-popup {
 767   width: 200px;
 768   top: 18px;
 769 }
 770 /* section */
 771 section {
 772   display: table-cell;
 773   vertical-align: top;
 774   width: 800px;
 775   padding: 0px 20px 0px 10px;
 776 }
 777 /* wall item */
 778 .tread-wrapper {
 779   background-color: #f6f7f8;
 780   position: relative;
 781   padding: 10px;
 782   margin-bottom: 20px;
 783   width: 780px;
 784 }
 785 .wall-item-decor {
 786   position: absolute;
 787   left: 790px;
 788   top: -10px;
 789   width: 16px;
 790 }
 791 .unstarred {
 792   display: none;
 793 }
 794 .wall-item-container {
 795   display: table;
 796   width: 780px;
 797 }
 798 .wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom {
 799   display: table-row;
 800 }
 801 .wall-item-container .wall-item-bottom {
 802   opacity: 0.5;
 803   -webkit-transition: all 0.2s ease-in-out;
 804   -moz-transition: all 0.2s ease-in-out;
 805   -o-transition: all 0.2s ease-in-out;
 806   -ms-transition: all 0.2s ease-in-out;
 807   transition: all 0.2s ease-in-out;
 808 }
 809 .wall-item-container:hover .wall-item-bottom {
 810   opacity: 1;
 811   -webkit-transition: all 0.2s ease-in-out;
 812   -moz-transition: all 0.2s ease-in-out;
 813   -o-transition: all 0.2s ease-in-out;
 814   -ms-transition: all 0.2s ease-in-out;
 815   transition: all 0.2s ease-in-out;
 816 }
 817 .wall-item-container .wall-item-info {
 818   display: table-cell;
 819   vertical-align: top;
 820   text-align: left;
 821   width: 60px;
 822 }
 823 .wall-item-container .wall-item-location {
 824   word-wrap: break-word;
 825   width: 50px;
 826 }
 827 .wall-item-container .wall-item-content {
 828   display: table-cell;
 829   font-size: 12px;
 830   max-width: 720px;
 831   word-wrap: break-word;
 832 }
 833 .wall-item-container .wall-item-content img {
 834   max-width: 710px;
 835 }
 836 .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions {
 837   display: table-cell;
 838   vertical-align: middle;
 839 }
 840 .wall-item-container .wall-item-links .icon, .wall-item-container .wall-item-actions .icon {
 841   opacity: 0.5;
 842   -webkit-transition: all 0.2s ease-in-out;
 843   -moz-transition: all 0.2s ease-in-out;
 844   -o-transition: all 0.2s ease-in-out;
 845   -ms-transition: all 0.2s ease-in-out;
 846   transition: all 0.2s ease-in-out;
 847 }
 848 .wall-item-container .wall-item-links .icon:hover, .wall-item-container .wall-item-actions .icon:hover {
 849   opacity: 1;
 850   -webkit-transition: all 0.2s ease-in-out;
 851   -moz-transition: all 0.2s ease-in-out;
 852   -o-transition: all 0.2s ease-in-out;
 853   -ms-transition: all 0.2s ease-in-out;
 854   transition: all 0.2s ease-in-out;
 855 }
 856 .wall-item-container .wall-item-ago {
 857   padding-right: 40px;
 858 }
 859 .wall-item-container .wall-item-name {
 860   font-weight: bold;
 861 }
 862 .wall-item-container .wall-item-actions-author {
 863   float: left;
 864   width: 20em;
 865   margin-top: 0.5em;
 866 }
 867 .wall-item-container .wall-item-actions-social {
 868   float: left;
 869   margin-top: 0.5em;
 870 }
 871 .wall-item-container .wall-item-actions-social a {
 872   margin-right: 3em;
 873 }
 874 .wall-item-container .wall-item-actions-tools {
 875   float: right;
 876   width: 15%;
 877 }
 878 .wall-item-container .wall-item-actions-tools a {
 879   float: right;
 880 }
 881 .wall-item-container .wall-item-actions-tools input {
 882   float: right;
 883 }
 884 .wall-item-container.comment {
 885   /*margin-top: 50px;*/
 886
 887 }
 888 .wall-item-container.comment .contact-photo {
 889   width: 32px;
 890   height: 32px;
 891   margin-left: 16px;
 892   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
 893
 894 }
 895 .wall-item-container.comment .contact-photo-menu-button {
 896   top: 15px !important;
 897   left: 15px !important;
 898 }
 899 .wall-item-container.comment .wall-item-links {
 900   padding-left: 12px;
 901 }
 902 .wall-item-comment-wrapper {
 903   margin: 30px 2em 2em 60px;
 904 }
 905 .wall-item-comment-wrapper .comment-edit-photo {
 906   display: none;
 907 }
 908 .wall-item-comment-wrapper textarea {
 909   height: 1em;
 910   width: 100%;
 911   font-size: 10px;
 912   color: #999999;
 913   border: 1px solid #999999;
 914   padding: 0.3em;
 915 }
 916 .wall-item-comment-wrapper .comment-edit-text-full {
 917   font-size: 14px;
 918   height: 4em;
 919   color: #2d2d2d;
 920   border: 1px solid #2d2d2d;
 921 }
 922 .comment-edit-preview {
 923   width: 710px;
 924   border: 1px solid #2d2d2d;
 925   margin-top: 10px;
 926 }
 927 .comment-edit-preview .contact-photo {
 928   width: 32px;
 929   height: 32px;
 930   margin-left: 16px;
 931   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
 932
 933 }
 934 .comment-edit-preview .contact-photo-menu-button {
 935   top: 15px !important;
 936   left: 15px !important;
 937 }
 938 .comment-edit-preview .wall-item-links {
 939   padding-left: 12px;
 940 }
 941 .comment-edit-preview .wall-item-container {
 942   width: 700px;
 943 }
 944 .comment-edit-preview .tread-wrapper {
 945   width: 700px;
 946   padding: 0;
 947   margin: 10px 0;
 948 }
 949 .wall-item-tags {
 950   padding-top: 5px;
 951 }
 952 .tag {
 953   background: url("../../../images/tag_b.png") no-repeat center left;
 954   color: #ffffff;
 955   padding-left: 3px;
 956 }
 957 .tag a {
 958   padding-right: 8px;
 959   background: url("../../../images/tag.png") no-repeat center right;
 960   color: #ffffff;
 961 }
 962 .wwto {
 963   position: absolute !important;
 964   width: 25px;
 965   height: 25px;
 966   background: #FFFFFF;
 967   border: 2px solid #364e59;
 968   height: 25px;
 969   width: 25px;
 970   overflow: hidden;
 971   padding: 1px;
 972   position: absolute !important;
 973   top: 40px;
 974   left: 30px;
 975   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 976   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 977   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 978 }
 979 .wwto .contact-photo {
 980   width: 25px;
 981   height: 25px;
 982 }
 983 #pause {
 984   position: fixed;
 985   bottom: 5px;
 986   right: 5px;
 987 }
 988 /* contacts menu */
 989 .contact-photo-wrapper {
 990   position: relative;
 991 }
 992 .contact-photo {
 993   width: 48px;
 994   height: 48px;
 995   overflow: hidden;
 996   display: block;
 997 }
 998 .contact-photo img {
 999   width: 48px;
1000   height: 48px;
1001 }
1002 .contact-photo-menu-button {
1003   display: none;
1004   position: absolute;
1005   left: -2px;
1006   top: 31px;
1007 }
1008 .contact-wrapper {
1009   float: left;
1010   width: 90px;
1011   height: 90px;
1012   margin-bottom: 15px;
1013 }
1014 .contact-wrapper .contact-photo {
1015   width: 80px;
1016   height: 80px;
1017 }
1018 .contact-wrapper .contact-photo img {
1019   width: 80px;
1020   height: 80px;
1021 }
1022 .contact-wrapper .contact-photo-menu-button {
1023   left: 0px;
1024   top: 63px;
1025 }
1026 .directory-item {
1027   float: left;
1028   width: 200px;
1029   height: 200px;
1030 }
1031 .directory-item .contact-photo {
1032   width: 175px;
1033   height: 175px;
1034 }
1035 .directory-item .contact-photo img {
1036   width: 175px;
1037   height: 175px;
1038 }
1039 .contact-name {
1040   text-align: center;
1041   font-weight: bold;
1042 }
1043 .contact-details {
1044   color: #999999;
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: #0e232e;
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: #cccccc;
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: #364e59;
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: #bdcdd4;
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, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper {
1177   display: block!important;
1178 }
1179 #acl-wrapper {
1180   width: 690px;
1181   float: left;
1182 }
1183 #acl-search {
1184   float: right;
1185   background: #ffffff url("../../../images/search_18.png") no-repeat right center;
1186   padding-right: 20px;
1187 }
1188 #acl-showall {
1189   float: left;
1190   display: block;
1191   width: auto;
1192   height: 18px;
1193   background-color: #cccccc;
1194   background-image: url("../../../images/show_all_off.png");
1195   background-position: 7px 7px;
1196   background-repeat: no-repeat;
1197   padding: 7px 5px 0px 30px;
1198   color: #999999;
1199   -moz-border-radius: 5px 5px 5px 5px;
1200   -webkit-border-radius: 5px 5px 5px 5px;
1201   border-radius: 5px 5px 5px 5px;
1202 }
1203 #acl-showall.selected {
1204   color: #000000;
1205   background-color: #ff9900;
1206   background-image: url("../../../images/show_all_on.png");
1207 }
1208 #acl-list {
1209   height: 210px;
1210   border: 1px solid #cccccc;
1211   clear: both;
1212   margin-top: 30px;
1213   overflow: auto;
1214 }
1215 .acl-list-item {
1216   display: block;
1217   width: 150px;
1218   height: 30px;
1219   border: 1px solid #cccccc;
1220   margin: 5px;
1221   float: left;
1222 }
1223 .acl-list-item img {
1224   width: 22px;
1225   height: 22px;
1226   float: left;
1227   margin: 4px;
1228 }
1229 .acl-list-item p {
1230   height: 12px;
1231   font-size: 10px;
1232   margin: 0px;
1233   padding: 2px 0px 1px;
1234   overflow: hidden;
1235 }
1236 .acl-list-item a {
1237   font-size: 8px;
1238   display: block;
1239   width: 40px;
1240   height: 10px;
1241   float: left;
1242   color: #999999;
1243   background-color: #cccccc;
1244   background-position: 3px 3px;
1245   background-repeat: no-repeat;
1246   margin-right: 5px;
1247   -webkit-border-radius: 2px ;
1248   -moz-border-radius: 2px;
1249   border-radius: 2px;
1250   padding-left: 15px;
1251 }
1252 #acl-wrapper a:hover {
1253   text-decoration: none;
1254   color: #000000;
1255 }
1256 .acl-button-show {
1257   background-image: url("../../../images/show_off.png");
1258 }
1259 .acl-button-hide {
1260   background-image: url("../../../images/hide_off.png");
1261 }
1262 .acl-button-show.selected {
1263   color: #000000;
1264   background-color: #9ade00;
1265   background-image: url("../../../images/show_on.png");
1266 }
1267 .acl-button-hide.selected {
1268   color: #000000;
1269   background-color: #ff4141;
1270   background-image: url("../../../images/hide_on.png");
1271 }
1272 .acl-list-item.groupshow {
1273   border-color: #9ade00;
1274 }
1275 .acl-list-item.grouphide {
1276   border-color: #ff4141;
1277 }
1278 /** /acl **/
1279 /** tab buttons **/
1280 ul.tabs {
1281   list-style-type: none;
1282   padding-bottom: 10px;
1283 }
1284 ul.tabs li {
1285   float: left;
1286   margin-left: 20px;
1287 }
1288 ul.tabs li .active {
1289   border-bottom: 1px solid #005c94;
1290 }
1291 /**
1292  * Form fields
1293  */
1294 .field {
1295   margin-bottom: 10px;
1296   padding-bottom: 10px;
1297   overflow: auto;
1298   width: 100%;
1299 }
1300 .field label {
1301   float: left;
1302   width: 200px;
1303 }
1304 .field input, .field textarea {
1305   width: 400px;
1306 }
1307 .field textarea {
1308   height: 100px;
1309 }
1310 .field .field_help {
1311   display: block;
1312   margin-left: 200px;
1313   color: #666666;
1314 }
1315 .field .onoff {
1316   float: left;
1317   width: 80px;
1318 }
1319 .field .onoff a {
1320   display: block;
1321   border: 1px solid #666666;
1322   background-image: url("../../../images/onoff.jpg");
1323   background-repeat: no-repeat;
1324   padding: 4px 2px 2px 2px;
1325   height: 16px;
1326   text-decoration: none;
1327 }
1328 .field .onoff .off {
1329   border-color: #666666;
1330   padding-left: 40px;
1331   background-position: left center;
1332   background-color: #cccccc;
1333   color: #666666;
1334   text-align: right;
1335 }
1336 .field .onoff .on {
1337   border-color: #204A87;
1338   padding-right: 40px;
1339   background-position: right center;
1340   background-color: #D7E3F1;
1341   color: #204A87;
1342   text-align: left;
1343 }
1344 .field .hidden {
1345   display: none!important;
1346 }
1347 .field.radio .field_help {
1348   margin-left: 0px;
1349 }
1350 #profile-edit-links li {
1351   list-style: none;
1352   margin-top: 10px;
1353 }
1354 #profile-edit-default-desc {
1355   color: #FF0000;
1356   border: 1px solid #FF8888;
1357   background-color: #FFEEEE;
1358   padding: 7px;
1359 }
1360 #profile-edit-profile-name-label,
1361 #profile-edit-name-label,
1362 #profile-edit-pdesc-label,
1363 #profile-edit-gender-label,
1364 #profile-edit-dob-label,
1365 #profile-edit-address-label,
1366 #profile-edit-locality-label,
1367 #profile-edit-region-label,
1368 #profile-edit-postal-code-label,
1369 #profile-edit-country-name-label,
1370 #profile-edit-marital-label,
1371 #profile-edit-with-label,
1372 #profile-edit-sexual-label,
1373 #profile-edit-politic-label,
1374 #profile-edit-religion-label,
1375 #profile-edit-pubkeywords-label,
1376 #profile-edit-prvkeywords-label,
1377 #profile-edit-gender-select,
1378 #profile-edit-homepage-label {
1379   float: left;
1380   width: 175px;
1381   padding-top: 7px;
1382 }
1383 #profile-edit-profile-name,
1384 #profile-edit-name,
1385 #gender-select,
1386 #profile-edit-pdesc,
1387 #profile-edit-gender,
1388 #profile-edit-dob,
1389 #profile-edit-address,
1390 #profile-edit-locality,
1391 #profile-edit-region,
1392 #profile-edit-postal-code,
1393 #profile-edit-country-name,
1394 #profile-edit-marital,
1395 #profile-edit-with,
1396 #profile-edit-sexual,
1397 #profile-edit-politic,
1398 #profile-edit-religion,
1399 #profile-edit-pubkeywords,
1400 #profile-edit-prvkeywords,
1401 #profile-edit-homepage {
1402   margin-top: 5px;
1403 }
1404 /* oauth */
1405 .oauthapp {
1406   height: auto;
1407   overflow: auto;
1408   border-bottom: 2px solid #cccccc;
1409   padding-bottom: 1em;
1410   margin-bottom: 1em;
1411 }
1412 .oauthapp img {
1413   float: left;
1414   width: 48px;
1415   height: 48px;
1416   margin: 10px;
1417 }
1418 .oauthapp img.noicon {
1419   background-image: url("../../../images/icons/48/plugin.png");
1420   background-position: center center;
1421   background-repeat: no-repeat;
1422 }
1423 .oauthapp a {
1424   float: left;
1425 }
1426 /* contacts */
1427 .contact-entry-wrapper {
1428   width: 50px;
1429   float: left;
1430 }
1431 /* photo */
1432 .lframe {
1433   float: left;
1434   margin: 0px 10px 10px 0px;
1435 }
1436 /* profile match wrapper */
1437 .profile-match-wrapper {
1438   float: left;
1439   width: 90px;
1440   height: 90px;
1441   margin-bottom: 20px;
1442 }
1443 .profile-match-wrapper .contact-photo {
1444   width: 80px;
1445   height: 80px;
1446 }
1447 .profile-match-wrapper .contact-photo img {
1448   width: 80px;
1449   height: 80px;
1450 }
1451 .profile-match-wrapper .contact-photo-menu-button {
1452   left: 0px;
1453   top: 63px;
1454 }
1455 /* page footer */
1456 footer {
1457   height: 100px;
1458   display: table-row;
1459 }
1460 .pager {
1461   margin-top: 25px;
1462   clear: both;
1463 }