view/theme/quattro/lilac/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   min-width: 22px;
  14   height: 22px;
  15 }
  16 .icon.text {
  17   text-indent: 0px;
  18 }
  19 .icon.notify {
  20   background-image: url("../../../images/icons/22/notify_off.png");
  21 }
  22 .icon.intro {
  23   background-image: url("icons/contacts_off.png");
  24 }
  25 .icon.mail {
  26   background-image: url("icons/messages_off.png");
  27 }
  28 .icon.gear {
  29   background-image: url("../../../images/icons/22/gear.png");
  30 }
  31 .icon.like {
  32   background-image: url("icons/like.png");
  33 }
  34 .icon.dislike {
  35   background-image: url("icons/dislike.png");
  36 }
  37 .icon.add {
  38   background-image: url("../../../images/icons/22/add.png");
  39 }
  40 .icon.delete {
  41   background-image: url("../../../images/icons/22/delete.png");
  42 }
  43 .icon.edit {
  44   background-image: url("../../../images/icons/22/edit.png");
  45 }
  46 .icon.star {
  47   background-image: url("../../../images/icons/22/star.png");
  48 }
  49 .icon.menu {
  50   background-image: url("../../../images/icons/22/menu.png");
  51 }
  52 .icon.link {
  53   background-image: url("../../../images/icons/22/link.png");
  54 }
  55 .icon.lock {
  56   background-image: url("../../../images/icons/22/lock.png");
  57 }
  58 .icon.unlock {
  59   background-image: url("../../../images/icons/22/unlock.png");
  60 }
  61 .icon.plugin {
  62   background-image: url("../../../images/icons/22/plugin.png");
  63 }
  64 .icon.type-unkn {
  65   background-image: url("../../../images/icons/22/zip.png");
  66 }
  67 .icon.type-audio {
  68   background-image: url("../../../images/icons/22/audio.png");
  69 }
  70 .icon.type-video {
  71   background-image: url("../../../images/icons/22/video.png");
  72 }
  73 .icon.type-image {
  74   background-image: url("../../../images/icons/22/image.png");
  75 }
  76 .icon.type-text {
  77   background-image: url("../../../images/icons/22/text.png");
  78 }
  79 .icon.language {
  80   background-image: url("icons/language.png");
  81 }
  82 .icon.text {
  83   padding: 10px 0px 0px 25px;
  84 }
  85 .icon.s10 {
  86   min-width: 10px;
  87   height: 10px;
  88 }
  89 .icon.s10.notify {
  90   background-image: url("../../../images/icons/10/notify_off.png");
  91 }
  92 .icon.s10.intro {
  93   background-image: url("icons/contacts_off.png");
  94 }
  95 .icon.s10.mail {
  96   background-image: url("icons/messages_off.png");
  97 }
  98 .icon.s10.gear {
  99   background-image: url("../../../images/icons/10/gear.png");
 100 }
 101 .icon.s10.like {
 102   background-image: url("icons/like.png");
 103 }
 104 .icon.s10.dislike {
 105   background-image: url("icons/dislike.png");
 106 }
 107 .icon.s10.add {
 108   background-image: url("../../../images/icons/10/add.png");
 109 }
 110 .icon.s10.delete {
 111   background-image: url("../../../images/icons/10/delete.png");
 112 }
 113 .icon.s10.edit {
 114   background-image: url("../../../images/icons/10/edit.png");
 115 }
 116 .icon.s10.star {
 117   background-image: url("../../../images/icons/10/star.png");
 118 }
 119 .icon.s10.menu {
 120   background-image: url("../../../images/icons/10/menu.png");
 121 }
 122 .icon.s10.link {
 123   background-image: url("../../../images/icons/10/link.png");
 124 }
 125 .icon.s10.lock {
 126   background-image: url("../../../images/icons/10/lock.png");
 127 }
 128 .icon.s10.unlock {
 129   background-image: url("../../../images/icons/10/unlock.png");
 130 }
 131 .icon.s10.plugin {
 132   background-image: url("../../../images/icons/10/plugin.png");
 133 }
 134 .icon.s10.type-unkn {
 135   background-image: url("../../../images/icons/10/zip.png");
 136 }
 137 .icon.s10.type-audio {
 138   background-image: url("../../../images/icons/10/audio.png");
 139 }
 140 .icon.s10.type-video {
 141   background-image: url("../../../images/icons/10/video.png");
 142 }
 143 .icon.s10.type-image {
 144   background-image: url("../../../images/icons/10/image.png");
 145 }
 146 .icon.s10.type-text {
 147   background-image: url("../../../images/icons/10/text.png");
 148 }
 149 .icon.s10.language {
 150   background-image: url("icons/language.png");
 151 }
 152 .icon.s10.text {
 153   padding: 2px 0px 0px 15px;
 154 }
 155 .icon.s16 {
 156   min-width: 16px;
 157   height: 16px;
 158 }
 159 .icon.s16.notify {
 160   background-image: url("../../../images/icons/16/notify_off.png");
 161 }
 162 .icon.s16.intro {
 163   background-image: url("icons/contacts_off.png");
 164 }
 165 .icon.s16.mail {
 166   background-image: url("icons/messages_off.png");
 167 }
 168 .icon.s16.gear {
 169   background-image: url("../../../images/icons/16/gear.png");
 170 }
 171 .icon.s16.like {
 172   background-image: url("icons/like.png");
 173 }
 174 .icon.s16.dislike {
 175   background-image: url("icons/dislike.png");
 176 }
 177 .icon.s16.add {
 178   background-image: url("../../../images/icons/16/add.png");
 179 }
 180 .icon.s16.delete {
 181   background-image: url("../../../images/icons/16/delete.png");
 182 }
 183 .icon.s16.edit {
 184   background-image: url("../../../images/icons/16/edit.png");
 185 }
 186 .icon.s16.star {
 187   background-image: url("../../../images/icons/16/star.png");
 188 }
 189 .icon.s16.menu {
 190   background-image: url("../../../images/icons/16/menu.png");
 191 }
 192 .icon.s16.link {
 193   background-image: url("../../../images/icons/16/link.png");
 194 }
 195 .icon.s16.lock {
 196   background-image: url("../../../images/icons/16/lock.png");
 197 }
 198 .icon.s16.unlock {
 199   background-image: url("../../../images/icons/16/unlock.png");
 200 }
 201 .icon.s16.plugin {
 202   background-image: url("../../../images/icons/16/plugin.png");
 203 }
 204 .icon.s16.type-unkn {
 205   background-image: url("../../../images/icons/16/zip.png");
 206 }
 207 .icon.s16.type-audio {
 208   background-image: url("../../../images/icons/16/audio.png");
 209 }
 210 .icon.s16.type-video {
 211   background-image: url("../../../images/icons/16/video.png");
 212 }
 213 .icon.s16.type-image {
 214   background-image: url("../../../images/icons/16/image.png");
 215 }
 216 .icon.s16.type-text {
 217   background-image: url("../../../images/icons/16/text.png");
 218 }
 219 .icon.s16.language {
 220   background-image: url("icons/language.png");
 221 }
 222 .icon.s16.text {
 223   padding: 4px 0px 0px 20px;
 224 }
 225 .icon.s22 {
 226   min-width: 22px;
 227   height: 22px;
 228 }
 229 .icon.s22.notify {
 230   background-image: url("../../../images/icons/22/notify_off.png");
 231 }
 232 .icon.s22.intro {
 233   background-image: url("icons/contacts_off.png");
 234 }
 235 .icon.s22.mail {
 236   background-image: url("icons/messages_off.png");
 237 }
 238 .icon.s22.gear {
 239   background-image: url("../../../images/icons/22/gear.png");
 240 }
 241 .icon.s22.like {
 242   background-image: url("icons/like.png");
 243 }
 244 .icon.s22.dislike {
 245   background-image: url("icons/dislike.png");
 246 }
 247 .icon.s22.add {
 248   background-image: url("../../../images/icons/22/add.png");
 249 }
 250 .icon.s22.delete {
 251   background-image: url("../../../images/icons/22/delete.png");
 252 }
 253 .icon.s22.edit {
 254   background-image: url("../../../images/icons/22/edit.png");
 255 }
 256 .icon.s22.star {
 257   background-image: url("../../../images/icons/22/star.png");
 258 }
 259 .icon.s22.menu {
 260   background-image: url("../../../images/icons/22/menu.png");
 261 }
 262 .icon.s22.link {
 263   background-image: url("../../../images/icons/22/link.png");
 264 }
 265 .icon.s22.lock {
 266   background-image: url("../../../images/icons/22/lock.png");
 267 }
 268 .icon.s22.unlock {
 269   background-image: url("../../../images/icons/22/unlock.png");
 270 }
 271 .icon.s22.plugin {
 272   background-image: url("../../../images/icons/22/plugin.png");
 273 }
 274 .icon.s22.type-unkn {
 275   background-image: url("../../../images/icons/22/zip.png");
 276 }
 277 .icon.s22.type-audio {
 278   background-image: url("../../../images/icons/22/audio.png");
 279 }
 280 .icon.s22.type-video {
 281   background-image: url("../../../images/icons/22/video.png");
 282 }
 283 .icon.s22.type-image {
 284   background-image: url("../../../images/icons/22/image.png");
 285 }
 286 .icon.s22.type-text {
 287   background-image: url("../../../images/icons/22/text.png");
 288 }
 289 .icon.s22.language {
 290   background-image: url("icons/language.png");
 291 }
 292 .icon.s22.text {
 293   padding: 10px 0px 0px 25px;
 294 }
 295 .icon.s48 {
 296   width: 48px;
 297   height: 48px;
 298 }
 299 .icon.s48.notify {
 300   background-image: url("../../../images/icons/48/notify_off.png");
 301 }
 302 .icon.s48.intro {
 303   background-image: url("icons/contacts_off.png");
 304 }
 305 .icon.s48.mail {
 306   background-image: url("icons/messages_off.png");
 307 }
 308 .icon.s48.gear {
 309   background-image: url("../../../images/icons/48/gear.png");
 310 }
 311 .icon.s48.like {
 312   background-image: url("icons/like.png");
 313 }
 314 .icon.s48.dislike {
 315   background-image: url("icons/dislike.png");
 316 }
 317 .icon.s48.add {
 318   background-image: url("../../../images/icons/48/add.png");
 319 }
 320 .icon.s48.delete {
 321   background-image: url("../../../images/icons/48/delete.png");
 322 }
 323 .icon.s48.edit {
 324   background-image: url("../../../images/icons/48/edit.png");
 325 }
 326 .icon.s48.star {
 327   background-image: url("../../../images/icons/48/star.png");
 328 }
 329 .icon.s48.menu {
 330   background-image: url("../../../images/icons/48/menu.png");
 331 }
 332 .icon.s48.link {
 333   background-image: url("../../../images/icons/48/link.png");
 334 }
 335 .icon.s48.lock {
 336   background-image: url("../../../images/icons/48/lock.png");
 337 }
 338 .icon.s48.unlock {
 339   background-image: url("../../../images/icons/48/unlock.png");
 340 }
 341 .icon.s48.plugin {
 342   background-image: url("../../../images/icons/48/plugin.png");
 343 }
 344 .icon.s48.type-unkn {
 345   background-image: url("../../../images/icons/48/zip.png");
 346 }
 347 .icon.s48.type-audio {
 348   background-image: url("../../../images/icons/48/audio.png");
 349 }
 350 .icon.s48.type-video {
 351   background-image: url("../../../images/icons/48/video.png");
 352 }
 353 .icon.s48.type-image {
 354   background-image: url("../../../images/icons/48/image.png");
 355 }
 356 .icon.s48.type-text {
 357   background-image: url("../../../images/icons/48/text.png");
 358 }
 359 .icon.s48.language {
 360   background-image: url("icons/language.png");
 361 }
 362 .icon.on {
 363   background-image: url("icons/addon_on.png");
 364   min-width: 16px;
 365   height: 16px;
 366   background-position: 0px 0px;
 367 }
 368 .icon.off {
 369   background-image: url("icons/addon_off.png");
 370   width: 16px;
 371   height: 16px;
 372   background-position: 0px 0px;
 373 }
 374 /* global */
 375 body {
 376   font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
 377   font-size: 11px;
 378   background-color: #f6ecf9;
 379   color: #2d2d2d;
 380   margin: 50px 0px 0px 0px;
 381   display: table;
 382 }
 383 h4 {
 384   font-size: 1.1em;
 385 }
 386 a,
 387 a:link {
 388   color: #521f5c;
 389   text-decoration: none;
 390 }
 391 a:visited {
 392   color: #86608e;
 393   text-decoration: none;
 394 }
 395 a:hover {
 396   color: #86608e;
 397   text-decoration: underline;
 398 }
 399 .left {
 400   float: left;
 401 }
 402 .right {
 403   float: right;
 404 }
 405 .hidden {
 406   display: none;
 407 }
 408 .clear {
 409   clear: both;
 410 }
 411 .fakelink {
 412   color: #521f5c;
 413   text-decoration: none;
 414   cursor: pointer;
 415 }
 416 .fakelink:hover {
 417   color: #86608e;
 418   text-decoration: underline;
 419 }
 420 blockquote {
 421   background: #ffffff;
 422   padding: 1em;
 423   margin-left: 1em;
 424   border-left: 1em solid #e6e6e6;
 425 }
 426 code {
 427   font-family: Courier, monospace;
 428   white-space: pre;
 429   display: block;
 430   overflow: auto;
 431   border: 1px solid #444;
 432   background: #EEE;
 433   color: #444;
 434   padding: 10px;
 435   margin-top: 20px;
 436 }
 437 #panel {
 438   position: absolute;
 439   width: 10em;
 440   background: #ffffff;
 441   color: #2d2d2d;
 442   margin: 0px;
 443   padding: 1em;
 444   list-style: none;
 445   border: 3px solid #364e59;
 446   z-index: 100000;
 447   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 448   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 449   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 450 }
 451 /* tool */
 452 .tool {
 453   height: auto;
 454   overflow: auto;
 455 }
 456 .tool .label {
 457   float: left;
 458 }
 459 .tool .action {
 460   float: right;
 461 }
 462 .tool > img {
 463   float: left;
 464 }
 465 /* popup notifications */
 466 #jGrowl.top-right {
 467   top: 30px;
 468   right: 15px;
 469 }
 470 div.jGrowl div.notice {
 471   background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 472   color: #ffffff;
 473   padding-left: 58px;
 474 }
 475 div.jGrowl div.info {
 476   background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 477   color: #ffffff;
 478   padding-left: 58px;
 479 }
 480 /* header */
 481 header {
 482   position: fixed;
 483   left: 43%;
 484   right: 43%;
 485   top: 0px;
 486   margin: 0px;
 487   padding: 0px;
 488   /*width: 100%; height: 12px; */
 489   z-index: 110;
 490   color: #ffffff;
 491 }
 492 header #site-location {
 493   display: none;
 494 }
 495 header #banner {
 496   overflow: hidden;
 497   text-align: center;
 498   width: 100%;
 499 }
 500 header #banner a,
 501 header #banner a:active,
 502 header #banner a:visited,
 503 header #banner a:link,
 504 header #banner a:hover {
 505   color: #ffffff;
 506   text-decoration: none;
 507   outline: none;
 508   vertical-align: bottom;
 509 }
 510 header #banner #logo-img {
 511   height: 22px;
 512   margin-top: 5px;
 513 }
 514 header #banner #logo-text {
 515   font-size: 22px;
 516 }
 517 /* nav */
 518 nav {
 519   width: 100%;
 520   height: 32px;
 521   position: fixed;
 522   left: 0px;
 523   top: 0px;
 524   padding: 0px;
 525   background-color: #521f5c;
 526   color: #ffffff;
 527   z-index: 100;
 528   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 529   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 530   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 531 }
 532 nav a,
 533 nav a:active,
 534 nav a:visited,
 535 nav a:link,
 536 nav a:hover {
 537   color: #ffffff;
 538   text-decoration: none;
 539   outline: none;
 540 }
 541 nav ul {
 542   margin: 0px;
 543   padding: 0px 20px;
 544 }
 545 nav ul li {
 546   list-style: none;
 547   margin: 0px;
 548   padding: 0px;
 549   float: left;
 550 }
 551 nav ul li .menu-popup {
 552   left: 0px;
 553   right: auto;
 554 }
 555 nav .nav-menu-icon {
 556   position: relative;
 557   height: 22px;
 558   padding: 5px;
 559   margin: 0px 10px;
 560   -moz-border-radius: 5px 5px 0 0;
 561   -webkit-border-radius: 5px 5px 0 0;
 562   border-radius: 5px 5px 0 0;
 563 }
 564 nav .nav-menu-icon.selected {
 565   background-color: #cbd38d;
 566 }
 567 nav .nav-menu-icon img {
 568   width: 22px;
 569   height: 22px;
 570 }
 571 nav .nav-menu-icon .nav-notify {
 572   top: 3px;
 573 }
 574 nav .nav-menu {
 575   position: relative;
 576   height: 16px;
 577   padding: 5px;
 578   margin: 3px 15px 0px;
 579   font-size: 14px;
 580   border-bottom: 3px solid #521f5c;
 581 }
 582 nav .nav-menu.selected {
 583   border-bottom: 3px solid #9eabb0;
 584 }
 585 nav .nav-notify {
 586   display: none;
 587   position: absolute;
 588   background-color: #86608e;
 589   -moz-border-radius: 5px 5px 5px 5px;
 590   -webkit-border-radius: 5px 5px 5px 5px;
 591   border-radius: 5px 5px 5px 5px;
 592   font-size: 10px;
 593   padding: 1px 3px;
 594   top: 0px;
 595   right: -10px;
 596   min-width: 15px;
 597   text-align: right;
 598 }
 599 nav .nav-notify.show {
 600   display: block;
 601 }
 602 nav #nav-help-link,
 603 nav #nav-search-link,
 604 nav #nav-directory-link,
 605 nav #nav-apps-link,
 606 nav #nav-site-linkmenu {
 607   float: right;
 608 }
 609 nav #nav-help-link .menu-popup,
 610 nav #nav-search-link .menu-popup,
 611 nav #nav-directory-link .menu-popup,
 612 nav #nav-apps-link .menu-popup,
 613 nav #nav-site-linkmenu .menu-popup {
 614   right: 0px;
 615   left: auto;
 616 }
 617 nav #nav-notifications-linkmenu.on .icon.s22.notify,
 618 nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 619   background-image: url("../../../images/icons/22/notify_on.png");
 620 }
 621 nav #nav-introductions-link.on .icon.s22.intro,
 622 nav #nav-introductions-link.selected .icon.s22.intro {
 623   background-image: url("icons/contacts_on.png");
 624 }
 625 nav #nav-messages-link.on .icon.s22.mail,
 626 nav #nav-messages-link.selected .icon.s22.mail {
 627   background-image: url("icons/messages_on.png");
 628 }
 629 nav #nav-apps-link.selected {
 630   background-color: #cbd38d;
 631 }
 632 ul.menu-popup {
 633   position: absolute;
 634   display: none;
 635   width: 10em;
 636   background: #ffffff;
 637   color: #2d2d2d;
 638   margin: 0px;
 639   padding: 0px;
 640   list-style: none;
 641   border: 3px solid #364e59;
 642   z-index: 100000;
 643   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 644   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 645   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 646 }
 647 ul.menu-popup a {
 648   display: block;
 649   color: #2d2d2d;
 650   padding: 5px 10px;
 651   text-decoration: none;
 652 }
 653 ul.menu-popup a:hover {
 654   background-color: #c0a3c7;
 655 }
 656 ul.menu-popup .menu-sep {
 657   border-top: 1px solid #9eabb0;
 658 }
 659 ul.menu-popup li {
 660   float: none;
 661   overflow: auto;
 662   height: auto;
 663   display: block;
 664 }
 665 ul.menu-popup li img {
 666   float: left;
 667   width: 16px;
 668   height: 16px;
 669   padding-right: 5px;
 670 }
 671 ul.menu-popup .empty {
 672   padding: 5px;
 673   text-align: center;
 674   color: #9eabb0;
 675 }
 676 ul.menu-popup .toolbar {
 677   background-color: #9eabb0;
 678   height: auto;
 679   overflow: auto;
 680 }
 681 ul.menu-popup .toolbar a {
 682   float: right;
 683 }
 684 ul.menu-popup .toolbar a:hover {
 685   background-color: #ffffff;
 686 }
 687 /* autocomplete popup */
 688 .autocomplete,
 689 .acpopup {
 690   max-height: 150px;
 691   background-color: #ffffff;
 692   color: #2d2d2d;
 693   border: 1px solid #364e59;
 694   overflow: auto;
 695   z-index: 100000;
 696   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 697   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 698   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 699 }
 700 .autocomplete > div,
 701 .acpopupitem {
 702   color: #2d2d2d;
 703   padding: 4px;
 704   clear: left;
 705   overflow: auto;
 706   height: auto;
 707 }
 708 .autocomplete > div img,
 709 .acpopupitem img {
 710   float: left;
 711   margin-right: 4px;
 712   width: 16px !important;
 713   height: 16px !important;
 714 }
 715 .autocomplete > div.selected,
 716 .acpopupitem.selected {
 717   background-color: #c0a3c7;
 718 }
 719 #nav-notifications-menu {
 720   width: 400px;
 721   max-height: 550px;
 722   overflow: auto;
 723 }
 724 #nav-notifications-menu img {
 725   float: left;
 726   margin-right: 5px;
 727 }
 728 #nav-notifications-menu .contactname {
 729   font-weight: bold;
 730 }
 731 #nav-notifications-menu .notif-when {
 732   font-size: 10px;
 733   color: #9eabb0;
 734   display: block;
 735 }
 736 /* aside 230px*/
 737 aside {
 738   display: table-cell;
 739   vertical-align: top;
 740   width: 200px;
 741   padding: 0px 10px 0px 20px;
 742   border-right: 1px solid #bdcdd4;
 743 }
 744 aside .profile-edit-side-div {
 745   display: none;
 746 }
 747 aside .vcard .fn {
 748   font-size: 16px;
 749   font-weight: bold;
 750   margin-bottom: 5px;
 751 }
 752 aside .vcard .title {
 753   margin-bottom: 5px;
 754 }
 755 aside .vcard dl {
 756   height: auto;
 757   overflow: auto;
 758 }
 759 aside .vcard dt {
 760   float: left;
 761   margin-left: 0px;
 762   width: 35%;
 763   text-align: right;
 764   color: #999999;
 765 }
 766 aside .vcard dd {
 767   float: left;
 768   margin-left: 4px;
 769   width: 60%;
 770 }
 771 aside #profile-extra-links ul {
 772   padding: 0px;
 773   margin: 0px;
 774 }
 775 aside #profile-extra-links li {
 776   padding: 0px;
 777   margin: 0px;
 778   list-style: none;
 779 }
 780 aside #wallmessage-link {
 781   display: block;
 782   -moz-border-radius: 5px 5px 5px 5px;
 783   -webkit-border-radius: 5px 5px 5px 5px;
 784   border-radius: 5px 5px 5px 5px;
 785   color: #ffffff;
 786   background: #521f5c url('../../../images/connect-bg.png') no-repeat left center;
 787   font-weight: bold;
 788   text-transform: uppercase;
 789   padding: 4px 2px 2px 35px;
 790   margin-top: 3px;
 791 }
 792 aside #wallmessage-link:hover {
 793   text-decoration: none;
 794   background-color: #86608e;
 795 }
 796 aside #dfrn-request-link {
 797   display: block;
 798   -moz-border-radius: 5px 5px 5px 5px;
 799   -webkit-border-radius: 5px 5px 5px 5px;
 800   border-radius: 5px 5px 5px 5px;
 801   color: #ffffff;
 802   background: #521f5c url('../../../images/connect-bg.png') no-repeat left center;
 803   font-weight: bold;
 804   text-transform: uppercase;
 805   padding: 4px 2px 2px 35px;
 806 }
 807 aside #dfrn-request-link:hover {
 808   text-decoration: none;
 809   background-color: #86608e;
 810 }
 811 aside #profiles-menu {
 812   width: 20em;
 813 }
 814 #contact-block {
 815   overflow: auto;
 816   height: auto;
 817   /*.contact-block-div { width:60px; height: 60px; }*/
 818 }
 819 #contact-block .contact-block-h4 {
 820   float: left;
 821   margin: 5px 0px;
 822 }
 823 #contact-block .allcontact-link {
 824   float: right;
 825   margin: 5px 0px;
 826 }
 827 #contact-block .contact-block-content {
 828   clear: both;
 829   overflow: hidden;
 830   height: auto;
 831 }
 832 #contact-block .contact-block-link {
 833   float: left;
 834   margin: 0px 2px 2px 0px;
 835 }
 836 #contact-block .contact-block-link img {
 837   width: 48px;
 838   height: 48px;
 839 }
 840 /* group member */
 841 #contact-edit-drop-link,
 842 .mail-list-delete-wrapper,
 843 .group-delete-wrapper {
 844   float: right;
 845   margin-right: 50px;
 846 }
 847 #contact-edit-drop-link .drophide,
 848 .mail-list-delete-wrapper .drophide,
 849 .group-delete-wrapper .drophide {
 850   background-image: url('../../../images/icons/22/delete.png');
 851   display: block;
 852   width: 22px;
 853   height: 22px;
 854   opacity: 0.3;
 855   position: relative;
 856   top: -50px;
 857 }
 858 #contact-edit-drop-link .drop,
 859 .mail-list-delete-wrapper .drop,
 860 .group-delete-wrapper .drop {
 861   background-image: url('../../../images/icons/22/delete.png');
 862   display: block;
 863   width: 22px;
 864   height: 22px;
 865   position: relative;
 866   top: -50px;
 867 }
 868 /*
 869 #group-members {
 870         margin-top: 20px;
 871         padding: 10px;
 872         height: 250px;
 873         overflow: auto;
 874         border: 1px solid #ddd;
 875 }
 876 #group-members-end {
 877         clear: both;
 878 }
 879 #group-all-contacts {
 880         padding: 10px;
 881         height: 450px;
 882         overflow: auto;
 883         border: 1px solid #ddd;
 884 }
 885 #group-all-contacts-end {
 886         clear: both;
 887         margin-bottom: 10px;
 888 }
 889 .contact-block-div {
 890         float: left;
 891         width: 60px;
 892         height: 60px;
 893 }*/
 894 /* widget */
 895 .widget {
 896   margin-bottom: 2em;
 897   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 898         .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
 899 }
 900 .widget h3 {
 901   padding: 0px;
 902   margin: 2px;
 903 }
 904 .widget .action {
 905   opacity: 0.1;
 906   -webkit-transition: all 0.2s ease-in-out;
 907   -moz-transition: all 0.2s ease-in-out;
 908   -o-transition: all 0.2s ease-in-out;
 909   -ms-transition: all 0.2s ease-in-out;
 910   transition: all 0.2s ease-in-out;
 911 }
 912 .widget input.action {
 913   opacity: 0.5;
 914   -webkit-transition: all 0.2s ease-in-out;
 915   -moz-transition: all 0.2s ease-in-out;
 916   -o-transition: all 0.2s ease-in-out;
 917   -ms-transition: all 0.2s ease-in-out;
 918   transition: all 0.2s ease-in-out;
 919 }
 920 .widget:hover .title .action {
 921   opacity: 1;
 922   -webkit-transition: all 0.2s ease-in-out;
 923   -moz-transition: all 0.2s ease-in-out;
 924   -o-transition: all 0.2s ease-in-out;
 925   -ms-transition: all 0.2s ease-in-out;
 926   transition: all 0.2s ease-in-out;
 927 }
 928 .widget .tool:hover .action {
 929   opacity: 1;
 930   -webkit-transition: all 0.2s ease-in-out;
 931   -moz-transition: all 0.2s ease-in-out;
 932   -o-transition: all 0.2s ease-in-out;
 933   -ms-transition: all 0.2s ease-in-out;
 934   transition: all 0.2s ease-in-out;
 935 }
 936 .widget .tool:hover .action.ticked {
 937   opacity: 1;
 938   -webkit-transition: all 0.2s ease-in-out;
 939   -moz-transition: all 0.2s ease-in-out;
 940   -o-transition: all 0.2s ease-in-out;
 941   -ms-transition: all 0.2s ease-in-out;
 942   transition: all 0.2s ease-in-out;
 943 }
 944 .widget ul {
 945   padding: 0px;
 946 }
 947 .widget ul li {
 948   padding-left: 16px;
 949   min-height: 16px;
 950   list-style: none;
 951 }
 952 .widget .tool.selected {
 953   background: url('../../../images/selected.png') no-repeat left center;
 954 }
 955 /* widget: search */
 956 #add-search-popup {
 957   width: 200px;
 958   top: 18px;
 959 }
 960 /* section 800px */
 961 section {
 962   display: table-cell;
 963   vertical-align: top;
 964   width: 770px;
 965   padding: 0px 20px 0px 10px;
 966 }
 967 .sparkle {
 968   cursor: url('icons/lock.cur'), pointer;
 969 }
 970 /* wall item */
 971 .tread-wrapper {
 972   background-color: #eff0f1;
 973   position: relative;
 974   padding: 10px;
 975   margin-bottom: 20px;
 976   width: 750px;
 977   border-bottom: 1px solid #cccccc;
 978 }
 979 .wall-item-decor {
 980   position: absolute;
 981   left: 97%;
 982   top: -10px;
 983   width: 16px;
 984 }
 985 .unstarred {
 986   display: none;
 987 }
 988 .wall-item-container {
 989   display: table;
 990   width: 750px;
 991 }
 992 .wall-item-container .wall-item-item,
 993 .wall-item-container .wall-item-bottom {
 994   display: table-row;
 995 }
 996 .wall-item-container .wall-item-bottom {
 997   opacity: 0.5;
 998   -webkit-transition: all 0.2s ease-in-out;
 999   -moz-transition: all 0.2s ease-in-out;
1000   -o-transition: all 0.2s ease-in-out;
1001   -ms-transition: all 0.2s ease-in-out;
1002   transition: all 0.2s ease-in-out;
1003 }
1004 .wall-item-container:hover .wall-item-bottom {
1005   opacity: 1;
1006   -webkit-transition: all 0.2s ease-in-out;
1007   -moz-transition: all 0.2s ease-in-out;
1008   -o-transition: all 0.2s ease-in-out;
1009   -ms-transition: all 0.2s ease-in-out;
1010   transition: all 0.2s ease-in-out;
1011 }
1012 .wall-item-container .wall-item-info {
1013   display: table-cell;
1014   vertical-align: top;
1015   text-align: left;
1016   width: 60px;
1017 }
1018 .wall-item-container .wall-item-location {
1019   word-wrap: break-word;
1020   width: 50px;
1021 }
1022 .wall-item-container .wall-item-content {
1023   display: table-cell;
1024   font-size: 12px;
1025   max-width: 720px;
1026   word-wrap: break-word;
1027 }
1028 .wall-item-container .wall-item-content img {
1029   max-width: 700px;
1030 }
1031 .wall-item-container .wall-item-links,
1032 .wall-item-container .wall-item-actions {
1033   display: table-cell;
1034   vertical-align: middle;
1035 }
1036 .wall-item-container .wall-item-links .icon,
1037 .wall-item-container .wall-item-actions .icon {
1038   opacity: 0.5;
1039   -webkit-transition: all 0.2s ease-in-out;
1040   -moz-transition: all 0.2s ease-in-out;
1041   -o-transition: all 0.2s ease-in-out;
1042   -ms-transition: all 0.2s ease-in-out;
1043   transition: all 0.2s ease-in-out;
1044 }
1045 .wall-item-container .wall-item-links .icon:hover,
1046 .wall-item-container .wall-item-actions .icon:hover {
1047   opacity: 1;
1048   -webkit-transition: all 0.2s ease-in-out;
1049   -moz-transition: all 0.2s ease-in-out;
1050   -o-transition: all 0.2s ease-in-out;
1051   -ms-transition: all 0.2s ease-in-out;
1052   transition: all 0.2s ease-in-out;
1053 }
1054 .wall-item-container .wall-item-ago {
1055   padding-right: 40px;
1056 }
1057 .wall-item-container .wall-item-name {
1058   font-weight: bold;
1059 }
1060 .wall-item-container .wall-item-actions-author {
1061   float: left;
1062   width: 20em;
1063   margin-top: 0.5em;
1064 }
1065 .wall-item-container .wall-item-actions-social {
1066   float: left;
1067   margin-top: 0.5em;
1068 }
1069 .wall-item-container .wall-item-actions-social a {
1070   margin-right: 3em;
1071 }
1072 .wall-item-container .wall-item-actions-tools {
1073   float: right;
1074   width: 15%;
1075 }
1076 .wall-item-container .wall-item-actions-tools a {
1077   float: right;
1078 }
1079 .wall-item-container .wall-item-actions-tools input {
1080   float: right;
1081 }
1082 .wall-item-container.comment .contact-photo-wrapper {
1083   margin-left: 16px;
1084 }
1085 .wall-item-container.comment .contact-photo {
1086   width: 32px;
1087   height: 32px;
1088 }
1089 .wall-item-container.comment .contact-photo-menu-button {
1090   top: 15px !important;
1091   left: 0px !important;
1092 }
1093 .wall-item-container.comment .wall-item-links {
1094   padding-left: 12px;
1095 }
1096 .wall-item-container.comment .commentbox {
1097   height: 0px;
1098   overflow: hidden;
1099   -webkit-transition: all 0.2s ease-in-out;
1100   -moz-transition: all 0.2s ease-in-out;
1101   -o-transition: all 0.2s ease-in-out;
1102   -ms-transition: all 0.2s ease-in-out;
1103   transition: all 0.2s ease-in-out;
1104 }
1105 .wall-item-container.comment .commentbox .wall-item-comment-wrapper {
1106   border-top: 1px solid #999999;
1107   height: 0px;
1108   overflow: hidden;
1109 }
1110 .wall-item-container.comment:hover .commentbox {
1111   height: auto;
1112   overflow: visible;
1113   -webkit-transition: all 0.2s ease-in-out;
1114   -moz-transition: all 0.2s ease-in-out;
1115   -o-transition: all 0.2s ease-in-out;
1116   -ms-transition: all 0.2s ease-in-out;
1117   transition: all 0.2s ease-in-out;
1118 }
1119 .wall-item-container.comment:hover .commentbox .wall-item-comment-wrapper {
1120   border-top: 0px;
1121   height: auto;
1122   overflow: visible;
1123 }
1124 /* 'tag' item type */
1125 .wall-item-container.item-tag .wall-item-content {
1126   opacity: 0.5;
1127   -webkit-transition: all 0.2s ease-in-out;
1128   -moz-transition: all 0.2s ease-in-out;
1129   -o-transition: all 0.2s ease-in-out;
1130   -ms-transition: all 0.2s ease-in-out;
1131   transition: all 0.2s ease-in-out;
1132 }
1133 .wall-item-container.item-tag .contact-photo-wrapper {
1134   margin-left: 32px;
1135 }
1136 .wall-item-container.item-tag .contact-photo {
1137   width: 16px;
1138   height: 16px;
1139 }
1140 .wall-item-container.item-tag .contact-photo-menu-button {
1141   top: 15px !important;
1142   left: 15px !important;
1143 }
1144 .wall-item-comment-wrapper {
1145   margin: 1em 2em 1em 60px;
1146 }
1147 .wall-item-comment-wrapper .comment-edit-photo {
1148   display: none;
1149 }
1150 .wall-item-comment-wrapper textarea {
1151   height: 1em;
1152   width: 100%;
1153   font-size: 10px;
1154   color: #999999;
1155   border: 1px solid #999999;
1156   padding: 0.3em;
1157 }
1158 .wall-item-comment-wrapper .comment-edit-text-full {
1159   height: 4em;
1160   color: #2d2d2d;
1161   border: 1px solid #2d2d2d;
1162 }
1163 .threaded .wall-item-comment-wrapper {
1164   margin-left: 0px;
1165 }
1166 .comment-edit-preview {
1167   width: 710px;
1168   border: 1px solid #2d2d2d;
1169   margin-top: 10px;
1170   background-color: #c0a3c7;
1171 }
1172 .comment-edit-preview .contact-photo {
1173   width: 32px;
1174   height: 32px;
1175   margin-left: 16px;
1176   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
1177 }
1178 .comment-edit-preview .contact-photo-menu-button {
1179   top: 15px !important;
1180   left: 15px !important;
1181 }
1182 .comment-edit-preview .wall-item-links {
1183   padding-left: 12px;
1184 }
1185 .comment-edit-preview .wall-item-container {
1186   width: 90%;
1187 }
1188 .comment-edit-preview .tread-wrapper {
1189   width: 90%;
1190   padding: 0;
1191   margin: 10px 0;
1192   background-color: #c0a3c7;
1193   border-bottom: 0px;
1194 }
1195 .comment-edit-preview .wall-item-conv {
1196   display: none;
1197 }
1198 .shiny {
1199   border-right: 10px solid #c0a3c7;
1200 }
1201 #jot-preview-content .tread-wrapper {
1202   background-color: #c0a3c7;
1203 }
1204 .hide-comments-outer {
1205   margin-bottom: 0.8em;
1206 }
1207 .wall-item-tags {
1208   padding-top: 5px;
1209 }
1210 .tag {
1211   background: url("icons/tag.png") no-repeat center right;
1212   color: #ffffff;
1213   padding-right: 8px;
1214   padding-left: 3px;
1215 }
1216 .tag a {
1217   color: #ffffff;
1218 }
1219 .mention {
1220   background: url("icons/men.png") no-repeat 1px center;
1221   color: #666666;
1222   padding-right: 3px;
1223   padding-left: 18px;
1224 }
1225 .mention a {
1226   color: #666666;
1227 }
1228 .folder {
1229   background: url("icons/folder.png") no-repeat 1px center;
1230   color: #666666;
1231   padding-right: 3px;
1232   padding-left: 15px;
1233 }
1234 .folder a {
1235   color: #666666;
1236 }
1237 .category {
1238   background: url("icons/category.png") no-repeat 1px center;
1239   color: #666666;
1240   padding-right: 3px;
1241   padding-left: 15px;
1242 }
1243 .category a {
1244   color: #666666;
1245 }
1246 /*.filesavetags {
1247     padding: 3px 0px 3px 0px;
1248     opacity: 0.5;
1249 }*/
1250 .wwto {
1251   background: #FFFFFF;
1252   border: 2px solid #364e59;
1253   height: 25px;
1254   width: 25px;
1255   overflow: hidden;
1256   padding: 1px;
1257   position: absolute !important;
1258   top: 40px;
1259   left: 30px;
1260   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1261   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1262   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1263 }
1264 .wwto .contact-photo {
1265   width: 25px;
1266   height: 25px;
1267 }
1268 /* reshare */
1269 .wall-item-container .wall-item-content .type-link img,
1270 .type-link img {
1271   max-width: 160px;
1272   max-height: 160px;
1273   float: left;
1274   margin-right: 10px;
1275 }
1276 .type-link blockquote {
1277   margin-left: 160px;
1278   max-height: 160px;
1279   overflow: hidden;
1280 }
1281 .shared_header {
1282   height: 32px;
1283   color: #999;
1284   border-top: 1px solid #cccccc;
1285   padding-top: 5px;
1286   margin-top: 5px;
1287 }
1288 .shared_header img {
1289   -webkit-border-radius: 4px;
1290   -moz-border-radius: 4px;
1291   border-radius: 4px;
1292   float: left;
1293 }
1294 .shared_header span {
1295   margin-left: 9px;
1296 }
1297 blockquote.shared_content {
1298   margin-left: 32px;
1299   color: #000;
1300   border: none;
1301 }
1302 /* threaded comments */
1303 .children {
1304   margin-top: 1em;
1305 }
1306 .children .hide-comments-outer {
1307   margin-left: 60px;
1308 }
1309 .children .wwto {
1310   display: none;
1311 }
1312 .children .comment-edit-preview {
1313   width: 660px;
1314 }
1315 .children .comment-edit-preview .wall-item-container {
1316   width: 610px;
1317 }
1318 .children .children {
1319   margin-left: 40px;
1320 }
1321 .children .children .wall-item-container {
1322   width: 710px;
1323 }
1324 .children .children .comment-edit-preview {
1325   width: 620px;
1326 }
1327 .children .children .comment-edit-preview .wall-item-container {
1328   width: 620px;
1329 }
1330 .children .children .children .wall-item-container {
1331   width: 670px;
1332 }
1333 .children .children .children .comment-edit-preview {
1334   width: 580px;
1335 }
1336 .children .children .children .comment-edit-preview .wall-item-container {
1337   width: 580px;
1338 }
1339 .children .children .children .children .wall-item-container {
1340   width: 630px;
1341 }
1342 .children .children .children .children .comment-edit-preview {
1343   width: 540px;
1344 }
1345 .children .children .children .children .comment-edit-preview .wall-item-container {
1346   width: 540px;
1347 }
1348 .children .children .children .children .children .wall-item-container {
1349   width: 590px;
1350 }
1351 .children .children .children .children .children .comment-edit-preview {
1352   width: 500px;
1353 }
1354 .children .children .children .children .children .comment-edit-preview .wall-item-container {
1355   width: 500px;
1356 }
1357 .children .children .children .children .children .children {
1358   margin-left: 0px;
1359 }
1360 .children .children .children .children .children .children .hide-comments-outer {
1361   margin-left: 0px;
1362 }
1363 /*.threaded .hide-comments-outer { margin-left: 20px; }*/
1364 span[id^="showmore-teaser"] {
1365   background: url("showmore-bg.jpg") no-repeat center bottom;
1366 }
1367 span[id^="showmore-wrap"] {
1368   border-top: 1px solid #999999;
1369   color: #999999;
1370   display: block;
1371   text-align: center;
1372   background-color: #eff0f1;
1373 }
1374 #pause {
1375   position: fixed;
1376   bottom: 5px;
1377   right: 5px;
1378 }
1379 .contact-photo-wrapper {
1380   position: relative;
1381 }
1382 .contact-select {
1383   position: absolute;
1384   top: 64px;
1385   left: 64px;
1386   display: none;
1387 }
1388 .contact-select:checked,
1389 .contact-photo:hover .contact-select {
1390   display: block;
1391 }
1392 #contats-actions {
1393   clear: both;
1394 }
1395 .contact-photo {
1396   width: 48px;
1397   height: 48px;
1398   overflow: hidden;
1399   display: block;
1400 }
1401 .contact-photo img {
1402   width: 48px;
1403   height: 48px;
1404 }
1405 .contact-photo-menu-button {
1406   display: none;
1407   position: absolute;
1408   left: -2px;
1409   top: 31px;
1410 }
1411 .contact-wrapper {
1412   float: left;
1413   width: 300px;
1414   height: 90px;
1415   padding-right: 10px;
1416   margin: 0 10px 10px 0px;
1417 }
1418 .contact-wrapper .contact-photo-wrapper {
1419   float: left;
1420   margin-right: 10px;
1421 }
1422 .contact-wrapper .contact-photo {
1423   width: 80px;
1424   height: 80px;
1425 }
1426 .contact-wrapper .contact-photo img {
1427   width: 80px;
1428   height: 80px;
1429 }
1430 .contact-wrapper .contact-photo-menu-button {
1431   left: 0px;
1432   top: 63px;
1433 }
1434 .directory-item {
1435   float: left;
1436   width: 200px;
1437   height: 200px;
1438 }
1439 .directory-item .contact-photo {
1440   width: 175px;
1441   height: 175px;
1442 }
1443 .directory-item .contact-photo img {
1444   width: 175px;
1445   height: 175px;
1446 }
1447 .contact-name {
1448   font-weight: bold;
1449   padding-top: 15px;
1450 }
1451 .contact-details {
1452   color: #999999;
1453   white-space: nowrap;
1454   overflow: hidden;
1455   text-overflow: ellipsis;
1456 }
1457 /* editor */
1458 .jothidden {
1459   display: none;
1460 }
1461 #jot {
1462   width: 100%;
1463   margin: 0px 2em 20px 0px;
1464 }
1465 #jot .profile-jot-text {
1466   height: 1em;
1467   width: 99%;
1468   font-size: 10px;
1469   color: #999999;
1470   border: 1px solid #999999;
1471   padding: 0.3em;
1472 }
1473 #jot #jot-tools {
1474   margin: 0px;
1475   padding: 0px;
1476   height: 40px;
1477   overflow: none;
1478   width: 770px;
1479   background-color: #521f5c;
1480   border-bottom: 2px solid #9eabb0;
1481 }
1482 #jot #jot-tools li {
1483   list-style: none;
1484   float: left;
1485   width: 80px;
1486   height: 40px;
1487   border-bottom: 2px solid #9eabb0;
1488 }
1489 #jot #jot-tools li a {
1490   display: block;
1491   color: #cccccc;
1492   width: 100%;
1493   height: 40px;
1494   text-align: center;
1495   line-height: 40px;
1496   overflow: hidden;
1497 }
1498 #jot #jot-tools li:hover {
1499   background-color: #86608e;
1500   border-bottom: 2px solid #bdcdd4;
1501 }
1502 #jot #jot-tools li.perms {
1503   float: right;
1504   width: 40px;
1505 }
1506 #jot #jot-tools li.perms a.unlock {
1507   width: 30px;
1508   border-left: 10px solid #cccccc;
1509   background-color: #cccccc;
1510 }
1511 #jot #jot-tools li.perms a.lock {
1512   width: 30px;
1513   border-left: 10px solid #666666;
1514   background-color: #666666;
1515 }
1516 #jot #jot-tools li.submit {
1517   float: right;
1518   background-color: #cccccc;
1519   border-bottom: 2px solid #cccccc;
1520   border-right: 1px solid #666666;
1521   border-left: 1px solid #666666;
1522 }
1523 #jot #jot-tools li.submit input {
1524   border: 0px;
1525   margin: 0px;
1526   padding: 0px;
1527   background-color: #cccccc;
1528   color: #666666;
1529   width: 80px;
1530   height: 40px;
1531   line-height: 40px;
1532 }
1533 #jot #jot-tools li.submit input:hover {
1534   background-color: #521f5c;
1535   color: #666666;
1536 }
1537 #jot #jot-tools li.loading {
1538   float: right;
1539   background-color: #ffffff;
1540   width: 20px;
1541   vertical-align: center;
1542   text-align: center;
1543   border-top: 2px solid #9eabb0;
1544   height: 38px;
1545 }
1546 #jot #jot-tools li.loading img {
1547   margin-top: 10px;
1548 }
1549 #jot #jot-title {
1550   border: 0px;
1551   margin: 0px;
1552   height: 20px;
1553   width: 500px;
1554   font-weight: bold;
1555   border: 1px solid #f6ecf9;
1556 }
1557 #jot #jot-title:-webkit-input-placeholder {
1558   font-weight: normal;
1559 }
1560 #jot #jot-title:-moz-placeholder {
1561   font-weight: normal;
1562 }
1563 #jot #jot-title:hover {
1564   border: 1px solid #999999;
1565 }
1566 #jot #jot-title:focus {
1567   border: 1px solid #999999;
1568 }
1569 #jot #character-counter {
1570   width: 40px;
1571   float: right;
1572   text-align: right;
1573   height: 20px;
1574   line-height: 20px;
1575   padding-right: 20px;
1576 }
1577 #jot #jot-category {
1578   border: 0px;
1579   margin: 0px;
1580   height: 20px;
1581   width: 200px;
1582   border: 1px solid #f6ecf9;
1583 }
1584 #jot #jot-category:hover {
1585   border: 1px solid #999999;
1586 }
1587 #jot #jot-category:focus {
1588   border: 1px solid #999999;
1589 }
1590 /** buttons **/
1591 /*input[type="submit"] {
1592         border: 0px;
1593     background-color: @ButtonBackgroundColor;
1594     color: @ButtonColor;
1595     padding: 0px 10px;
1596         .rounded(5px);
1597     height: 18px;
1598 }*/
1599 /** acl **/
1600 #photo-edit-perms-select,
1601 #photos-upload-permissions-wrapper,
1602 #profile-jot-acl-wrapper {
1603   display: block!important;
1604 }
1605 #acl-wrapper {
1606   width: 690px;
1607   float: left;
1608 }
1609 #acl-search {
1610   float: right;
1611   background: #ffffff url("../../../images/search_18.png") no-repeat right center;
1612   padding-right: 20px;
1613 }
1614 #acl-showall {
1615   float: left;
1616   display: block;
1617   width: auto;
1618   height: 18px;
1619   background-color: #cccccc;
1620   background-image: url("../../../images/show_all_off.png");
1621   background-position: 7px 7px;
1622   background-repeat: no-repeat;
1623   padding: 7px 5px 0px 30px;
1624   color: #999999;
1625   -moz-border-radius: 5px 5px 5px 5px;
1626   -webkit-border-radius: 5px 5px 5px 5px;
1627   border-radius: 5px 5px 5px 5px;
1628 }
1629 #acl-showall.selected {
1630   color: #000000;
1631   background-color: #ff9900;
1632   background-image: url("../../../images/show_all_on.png");
1633 }
1634 #acl-list {
1635   height: 210px;
1636   border: 1px solid #cccccc;
1637   clear: both;
1638   margin-top: 30px;
1639   overflow: auto;
1640 }
1641 .acl-list-item {
1642   display: block;
1643   width: 150px;
1644   height: 30px;
1645   border: 1px solid #cccccc;
1646   margin: 5px;
1647   float: left;
1648 }
1649 .acl-list-item img {
1650   width: 22px;
1651   height: 22px;
1652   float: left;
1653   margin: 4px;
1654 }
1655 .acl-list-item p {
1656   height: 12px;
1657   font-size: 10px;
1658   margin: 0px;
1659   padding: 2px 0px 1px;
1660   overflow: hidden;
1661 }
1662 .acl-list-item a {
1663   font-size: 8px;
1664   display: block;
1665   width: 40px;
1666   height: 10px;
1667   float: left;
1668   color: #999999;
1669   background-color: #cccccc;
1670   background-position: 3px 3px;
1671   background-repeat: no-repeat;
1672   margin-right: 5px;
1673   -webkit-border-radius: 2px ;
1674   -moz-border-radius: 2px;
1675   border-radius: 2px;
1676   padding-left: 15px;
1677 }
1678 #acl-wrapper a:hover {
1679   text-decoration: none;
1680   color: #000000;
1681 }
1682 .acl-button-show {
1683   background-image: url("../../../images/show_off.png");
1684 }
1685 .acl-button-hide {
1686   background-image: url("../../../images/hide_off.png");
1687 }
1688 .acl-button-show.selected {
1689   color: #000000;
1690   background-color: #9ade00;
1691   background-image: url("../../../images/show_on.png");
1692 }
1693 .acl-button-hide.selected {
1694   color: #000000;
1695   background-color: #ff4141;
1696   background-image: url("../../../images/hide_on.png");
1697 }
1698 .acl-list-item.groupshow {
1699   border-color: #9ade00;
1700 }
1701 .acl-list-item.grouphide {
1702   border-color: #ff4141;
1703 }
1704 /** /acl **/
1705 /** tab buttons **/
1706 ul.tabs {
1707   list-style-type: none;
1708   padding-bottom: 10px;
1709 }
1710 ul.tabs li {
1711   float: left;
1712   margin-left: 20px;
1713 }
1714 ul.tabs li .active {
1715   border-bottom: 1px solid #86608e;
1716 }
1717 /** group editor **/
1718 #group-edit-desc {
1719   margin-top: 1em;
1720   color: #999999;
1721 }
1722 #group-update-wrapper {
1723   height: auto;
1724   overflow: auto;
1725 }
1726 #group-update-wrapper #group {
1727   width: 300px;
1728   float: left;
1729   margin-right: 20px;
1730 }
1731 #group-update-wrapper #contacts {
1732   width: 300px;
1733   float: left;
1734 }
1735 #group-update-wrapper #group-separator {
1736   display: none;
1737 }
1738 #group-update-wrapper .contact_list {
1739   height: 300px;
1740   border: 1px solid #364e59;
1741   overflow: auto;
1742 }
1743 #group-update-wrapper .contact_list .contact-block-div {
1744   width: 50px;
1745   height: 50px;
1746   float: left;
1747 }
1748 /**
1749  * Form fields
1750  */
1751 .field {
1752   margin-bottom: 10px;
1753   padding-bottom: 10px;
1754   overflow: auto;
1755   width: 100%;
1756 }
1757 .field label {
1758   float: left;
1759   width: 200px;
1760 }
1761 .field input,
1762 .field textarea {
1763   width: 400px;
1764 }
1765 .field input[type="checkbox"],
1766 .field input[type="radio"] {
1767   width: auto;
1768 }
1769 .field textarea {
1770   height: 100px;
1771 }
1772 .field .field_help {
1773   display: block;
1774   margin-left: 200px;
1775   color: #999999;
1776 }
1777 .field .onoff {
1778   float: left;
1779   width: 80px;
1780 }
1781 .field .onoff a {
1782   display: block;
1783   border: 1px solid #666666;
1784   background-image: url("../../../images/onoff.jpg");
1785   background-repeat: no-repeat;
1786   padding: 4px 2px 2px 2px;
1787   height: 16px;
1788   text-decoration: none;
1789 }
1790 .field .onoff .off {
1791   border-color: #666666;
1792   padding-left: 40px;
1793   background-position: left center;
1794   background-color: #cccccc;
1795   color: #666666;
1796   text-align: right;
1797 }
1798 .field .onoff .on {
1799   border-color: #204A87;
1800   padding-right: 40px;
1801   background-position: right center;
1802   background-color: #D7E3F1;
1803   color: #204A87;
1804   text-align: left;
1805 }
1806 .field .hidden {
1807   display: none!important;
1808 }
1809 .field.radio .field_help {
1810   margin-left: 0px;
1811 }
1812 #profile-edit-links li {
1813   list-style: none;
1814   margin-top: 10px;
1815 }
1816 #profile-edit-default-desc {
1817   color: #FF0000;
1818   border: 1px solid #FF8888;
1819   background-color: #FFEEEE;
1820   padding: 7px;
1821 }
1822 #profile-edit-profile-name-label,
1823 #profile-edit-name-label,
1824 #profile-edit-pdesc-label,
1825 #profile-edit-gender-label,
1826 #profile-edit-dob-label,
1827 #profile-edit-address-label,
1828 #profile-edit-locality-label,
1829 #profile-edit-region-label,
1830 #profile-edit-postal-code-label,
1831 #profile-edit-country-name-label,
1832 #profile-edit-marital-label,
1833 #profile-edit-with-label,
1834 #profile-edit-sexual-label,
1835 #profile-edit-politic-label,
1836 #profile-edit-religion-label,
1837 #profile-edit-pubkeywords-label,
1838 #profile-edit-prvkeywords-label,
1839 #profile-edit-gender-select,
1840 #profile-edit-homepage-label {
1841   float: left;
1842   width: 175px;
1843   padding-top: 7px;
1844 }
1845 #profile-edit-profile-name,
1846 #profile-edit-name,
1847 #gender-select,
1848 #profile-edit-pdesc,
1849 #profile-edit-gender,
1850 #profile-edit-dob,
1851 #profile-edit-address,
1852 #profile-edit-locality,
1853 #profile-edit-region,
1854 #profile-edit-postal-code,
1855 #profile-edit-country-name,
1856 #profile-edit-marital,
1857 #profile-edit-with,
1858 #profile-edit-sexual,
1859 #profile-edit-politic,
1860 #profile-edit-religion,
1861 #profile-edit-pubkeywords,
1862 #profile-edit-prvkeywords,
1863 #profile-edit-homepage {
1864   margin-top: 5px;
1865 }
1866 /* oauth */
1867 .oauthapp {
1868   height: auto;
1869   overflow: auto;
1870   border-bottom: 2px solid #cccccc;
1871   padding-bottom: 1em;
1872   margin-bottom: 1em;
1873 }
1874 .oauthapp img {
1875   float: left;
1876   width: 48px;
1877   height: 48px;
1878   margin: 10px;
1879 }
1880 .oauthapp img.noicon {
1881   background-image: url("../../../images/icons/48/plugin.png");
1882   background-position: center center;
1883   background-repeat: no-repeat;
1884 }
1885 .oauthapp a {
1886   float: left;
1887 }
1888 /* contacts */
1889 .contact-entry-wrapper {
1890   width: 50px;
1891   float: left;
1892 }
1893 /* photo albums */
1894 #photo-edit-link-wrap {
1895   margin-bottom: 10px;
1896 }
1897 #album-edit-link {
1898   border-right: 1px solid #364e59;
1899   float: left;
1900   padding-right: 5px;
1901   margin-right: 5px;
1902 }
1903 #photo-edit-link,
1904 #album-edit-link a {
1905   background: url("../../../images/icons/16/edit.png") no-repeat left center;
1906   padding-left: 18px;
1907 }
1908 #photo-toprofile-link {
1909   background: url("../../../images/icons/16/user.png") no-repeat left center;
1910   padding-left: 18px;
1911 }
1912 .photos-upload-link a,
1913 #photo-top-upload-link {
1914   background: url("../../../images/icons/16/add.png") no-repeat left center;
1915   padding-left: 18px;
1916 }
1917 .photo-top-image-wrapper,
1918 .photo-album-image-wrapper {
1919   float: left;
1920   margin: 0px 10px 10px 0px;
1921   width: 150px;
1922   height: 150px;
1923   position: relative;
1924   overflow: hidden;
1925 }
1926 .photo-top-image-wrapper img,
1927 .photo-album-image-wrapper img {
1928   width: 150px;
1929 }
1930 .photo-top-image-wrapper .photo-top-album-name,
1931 .photo-album-image-wrapper .photo-top-album-name,
1932 .photo-top-image-wrapper .caption,
1933 .photo-album-image-wrapper .caption {
1934   position: absolute;
1935   color: #2d2d2d;
1936   background-color: #ffffff;
1937   width: 100%;
1938   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
1939   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
1940   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
1941   -webkit-transition: all 0.5s ease-in-out;
1942   -moz-transition: all 0.5s ease-in-out;
1943   -o-transition: all 0.5s ease-in-out;
1944   -ms-transition: all 0.5s ease-in-out;
1945   transition: all 0.5s ease-in-out;
1946   bottom: -150px;
1947 }
1948 .photo-top-image-wrapper:hover .photo-top-album-name,
1949 .photo-album-image-wrapper:hover .photo-top-album-name,
1950 .photo-top-image-wrapper:hover .caption,
1951 .photo-album-image-wrapper:hover .caption {
1952   bottom: 0px;
1953   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1954   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1955   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1956   -webkit-transition: all 0.5s ease-in-out;
1957   -moz-transition: all 0.5s ease-in-out;
1958   -o-transition: all 0.5s ease-in-out;
1959   -ms-transition: all 0.5s ease-in-out;
1960   transition: all 0.5s ease-in-out;
1961 }
1962 #photo-photo {
1963   display: block;
1964   width: 660px;
1965   padding: 50px;
1966   margin-bottom: 0px;
1967   text-align: center;
1968   background-color: #999999;
1969 }
1970 #photo-photo img {
1971   max-width: 560px;
1972 }
1973 #photo-album-title {
1974   background: url("../../../images/icons/22/image.png") no-repeat top left;
1975   padding-left: 23px;
1976   min-height: 22px;
1977 }
1978 #photo-album-title a {
1979   display: block;
1980   padding-top: 5px;
1981 }
1982 #photo-caption {
1983   display: block;
1984   width: 660px;
1985   min-height: 55px;
1986   background-color: #cccccc;
1987   padding: 0 50px 0 50px;
1988 }
1989 #photo-next-link > a > div {
1990   background: url("icons/next.png") no-repeat center center;
1991   float: right;
1992   width: 50px;
1993   height: 50px;
1994 }
1995 #photo-prev-link > a > div {
1996   background: url("icons/prev.png") no-repeat center center;
1997   float: left;
1998   width: 50px;
1999   height: 50px;
2000 }
2001 #photo-like-div {
2002   display: block;
2003   width: 660px;
2004   height: 30px;
2005   background-color: #cccccc;
2006   padding: 0 50px 0 50px;
2007 }
2008 #photo-like-div .icon {
2009   float: left;
2010 }
2011 #photo-like-div .like-rotator {
2012   float: right;
2013 }
2014 /* profile match wrapper */
2015 .profile-match-wrapper {
2016   float: left;
2017   width: 90px;
2018   height: 90px;
2019   margin-bottom: 20px;
2020 }
2021 .profile-match-wrapper .contact-photo {
2022   width: 80px;
2023   height: 80px;
2024 }
2025 .profile-match-wrapper .contact-photo img {
2026   width: 80px;
2027   height: 80px;
2028 }
2029 .profile-match-wrapper .contact-photo-menu-button {
2030   left: 0px;
2031   top: 63px;
2032 }
2033 /* messages */
2034 #message-new {
2035   background: #19aeff;
2036   border: 1px solid #005c94;
2037   width: 150px;
2038 }
2039 #message-new a {
2040   color: #ffffff;
2041   text-align: center;
2042   display: block;
2043   font-weight: bold;
2044   padding: 1em 0px;
2045 }
2046 .mail-list-wrapper {
2047   background-color: #f6f7f8;
2048   margin-bottom: 5px;
2049   width: 100%;
2050   height: auto;
2051   overflow: hidden;
2052 }
2053 .mail-list-wrapper span {
2054   display: block;
2055   float: left;
2056   width: 20%;
2057   overflow: hidden;
2058 }
2059 .mail-list-wrapper .mail-subject {
2060   width: 30%;
2061   padding: 4px 0px 0px 4px;
2062 }
2063 .mail-list-wrapper .mail-subject a {
2064   display: block;
2065 }
2066 .mail-list-wrapper .mail-subject.unseen a {
2067   font-weight: bold;
2068 }
2069 .mail-list-wrapper .mail-date {
2070   padding: 4px 4px 0px 4px;
2071 }
2072 .mail-list-wrapper .mail-from {
2073   padding: 4px 4px 0px 4px;
2074 }
2075 .mail-list-wrapper .mail-count {
2076   padding: 4px 4px 0px 4px;
2077   text-align: right;
2078 }
2079 .mail-list-wrapper .mail-delete {
2080   float: right;
2081 }
2082 #mail-display-subject {
2083   background-color: #f6f7f8;
2084   color: #2d2d2d;
2085   margin-bottom: 10px;
2086   width: 100%;
2087   height: auto;
2088   overflow: hidden;
2089 }
2090 #mail-display-subject span {
2091   float: left;
2092   overflow: hidden;
2093   padding: 4px 0px 0px 10px;
2094 }
2095 #mail-display-subject .mail-delete {
2096   float: right;
2097   opacity: 0.5;
2098   -webkit-transition: all 0.2s ease-in-out;
2099   -moz-transition: all 0.2s ease-in-out;
2100   -o-transition: all 0.2s ease-in-out;
2101   -ms-transition: all 0.2s ease-in-out;
2102   transition: all 0.2s ease-in-out;
2103 }
2104 #mail-display-subject:hover .mail-delete {
2105   opacity: 1;
2106   -webkit-transition: all 0.2s ease-in-out;
2107   -moz-transition: all 0.2s ease-in-out;
2108   -o-transition: all 0.2s ease-in-out;
2109   -ms-transition: all 0.2s ease-in-out;
2110   transition: all 0.2s ease-in-out;
2111 }
2112 /* theme screenshot */
2113 .screenshot,
2114 #theme-preview {
2115   position: absolute;
2116   width: 202px;
2117   left: 70%;
2118   top: 50px;
2119 }
2120 .screenshot img,
2121 #theme-preview img {
2122   width: 200px;
2123   height: 150px;
2124 }
2125 /* page footer */
2126 footer {
2127   height: 100px;
2128   display: table-row;
2129 }
2130 .pager {
2131   margin-top: 25px;
2132   clear: both;
2133 }
2134 /**
2135  * ADMIN
2136  */
2137 #pending-update {
2138   float: right;
2139   color: #ffffff;
2140   font-weight: bold;
2141   background-color: #FF0000;
2142   padding: 0em 0.3em;
2143 }
2144 #adminpage dl {
2145   clear: left;
2146   margin-bottom: 2px;
2147   padding-bottom: 2px;
2148   border-bottom: 1px solid black;
2149 }
2150 #adminpage dt {
2151   width: 200px;
2152   float: left;
2153   font-weight: bold;
2154 }
2155 #adminpage dd {
2156   margin-left: 200px;
2157 }
2158 #adminpage h3 {
2159   border-bottom: 1px solid #cccccc;
2160 }
2161 #adminpage .field label {
2162   font-weight: bold;
2163 }
2164 #adminpage .submit {
2165   clear: left;
2166   text-align: right;
2167 }
2168 #adminpage #pluginslist {
2169   margin: 0px;
2170   padding: 0px;
2171 }
2172 #adminpage .plugin {
2173   list-style: none;
2174   display: block;
2175   border: 1px solid #888888;
2176   padding: 1em;
2177   margin-bottom: 5px;
2178   clear: left;
2179 }
2180 #adminpage .plugin desc {
2181   margin-left: 2.5em;
2182 }
2183 #adminpage .toggleplugin {
2184   float: left;
2185   margin-right: 1em;
2186 }
2187 #adminpage table {
2188   width: 100%;
2189   border-bottom: 1px solid #000000;
2190   margin: 5px 0px;
2191 }
2192 #adminpage table th {
2193   text-align: left;
2194 }
2195 #adminpage table td .icon {
2196   float: left;
2197 }
2198 #adminpage table tr:hover {
2199   background-color: #bbc7d7;
2200 }
2201 #adminpage table#users img {
2202   width: 16px;
2203   height: 16px;
2204 }
2205 #adminpage .selectall {
2206   text-align: right;
2207 }
2208 /* edit buttons for comments */
2209 .icon.dim {
2210   opacity: 0.3;
2211   filter: alpha(opacity=30);
2212 }
2213 .comment-edit-bb {
2214   list-style: none;
2215   display: none;
2216   margin: 0px;
2217   padding: 0px;
2218   width: 75%;
2219 }
2220 .comment-edit-bb > li {
2221   display: inline-block;
2222   margin: 10px 10px 0 0;
2223   visibility: none;
2224 }
2225 .editicon {
2226   display: inline-block;
2227   width: 16px;
2228   height: 16px;
2229   background-image: url(icons/bbedit.png);
2230   text-decoration: none;
2231 }
2232 .editicon :hover {
2233   background-color: #ccc;
2234 }
2235 .boldbb {
2236   background-position: 0px 0px;
2237 }
2238 .boldbb:hover {
2239   background-position: 0px -16px;
2240 }
2241 .italicbb {
2242   background-position: -16px 0px;
2243 }
2244 .italicbb:hover {
2245   background-position: -16px -16px;
2246 }
2247 .underlinebb {
2248   background-position: -32px 0px;
2249 }
2250 .underlinebb:hover {
2251   background-position: -32px -16px;
2252 }
2253 .quotebb {
2254   background-position: -48px 0px;
2255 }
2256 .quotebb:hover {
2257   background-position: -48px -16px;
2258 }
2259 .codebb {
2260   background-position: -64px 0px;
2261 }
2262 .codebb:hover {
2263   background-position: -64px -16px;
2264 }
2265 .imagebb {
2266   background-position: -80px 0px;
2267 }
2268 .imagebb:hover {
2269   background-position: -80px -16px;
2270 }
2271 .urlbb {
2272   background-position: -96px 0px;
2273 }
2274 .urlbb:hover {
2275   background-position: -96px -16px;
2276 }
2277 .videobb {
2278   background-position: -112px 0px;
2279 }
2280 .videobb:hover {
2281   background-position: -112px -16px;
2282 }
2283 /** range input css **/
2284 /* slider root element */
2285 .slider {
2286   height: 2px;
2287   position: relative;
2288   cursor: pointer;
2289   border: 1px solid #333;
2290   width: 200px;
2291   margin: 10px 0px 10px 0px;
2292   float: left;
2293 }
2294 /* progress bar (enabled with progress: true) */
2295 .progress {
2296   height: 9px;
2297   background-color: #C5FF00;
2298   display: none;
2299   opacity: 0.6;
2300 }
2301 /* drag handle */
2302 .handle {
2303   background-color: #ccc;
2304   height: 16px;
2305   width: 8px;
2306   top: -8px;
2307   position: absolute;
2308   display: block;
2309   margin-top: 1px;
2310   border: 1px solid #000;
2311   cursor: move;
2312   -moz-border-radius: 0 0 5px 5px;
2313   -webkit-border-radius: 0 0 5px 5px;
2314   border-radius: 0 0 5px 5px;
2315   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
2316   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
2317   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
2318 }
2319 /* the input field */
2320 .range {
2321   width: 20px!important;
2322   font-size: 8pt;
2323   margin-left: 10px;
2324   border: 0px;
2325   color: #999999;
2326 }