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