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