view/theme/dispy-dark/style.css

   1 /*
   2  * dispy-dark
   3  *
   4  * author, maintainer: simon <http://simon.kisikew.org/>
   5  *
   6  */
   7
   8 /* from html5boilerplate */
   9
  10 /* these are to tell browsers they should be displayed a certain way */
  11 article, aside, details, figcaption, figure, footer,
  12 header, hgroup, nav, section {
  13     display: block;
  14 }
  15 audio, canvas, video, time {
  16     display: inline-block;
  17     *display: inline;
  18     *zoom: 1;
  19 }
  20 audio:not([controls]) {
  21     display: none;
  22 }
  23 [hidden] {
  24     display: none;
  25 }
  26
  27 /*
  28  *  Base
  29  */
  30
  31 /*
  32  * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
  33  * 2. Force vertical scrollbar in non-IE
  34  * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
  35  */
  36
  37 html {
  38     font-size: 100%;
  39     overflow-y: scroll;
  40     -webkit-text-size-adjust: 100%;
  41     -ms-text-size-adjust: 100%;
  42 }
  43 body {
  44     margin: 0;
  45     font-size: 16px;
  46     line-height: 1.1em;
  47 }
  48 body, button, input, select, textarea {
  49     font-family: sans-serif;
  50     color: #eec;
  51     background-color: #2e2f2e;
  52 }
  53 select {
  54     border: 1px #555 dotted;
  55     padding: 3px;
  56     margin: 3px;
  57     color: #eec;
  58     background: #2e2f2e;
  59 }
  60 option {
  61     padding: 3px;
  62     color: #eec;
  63     background: #2e2f2e;
  64 }
  65 option[selected="selected"] {
  66         color: #2e2f2e;
  67         background: #eec;
  68 }
  69 ul, ol {
  70     padding: 0;
  71 }
  72 /* remember to define focus styles! */
  73 :focus {
  74     outline: 0;
  75 }
  76
  77 /* remember to highlight inserts somehow! */
  78 ins {
  79     background-color: #2e302e;
  80     color: #ff9;
  81     text-decoration: none;
  82 }
  83 mark {
  84     background-color: #2e302e;
  85     color: #ff9;
  86     font-style: italic;
  87     font-weight: bold;
  88 }
  89 /* Redeclare monospace font family: h5bp.com/j */
  90 pre, code, kbd, samp, .wall-item-body code {
  91     font-family: monospace, monospace;
  92     _font-family: monospace;
  93     font-size: 1em; }
  94
  95 /* Improve readability of pre-formatted text in all browsers */
  96 pre, .wall-item-body code {
  97     white-space: pre;
  98     white-space: pre-wrap;
  99     word-wrap: break-word;
 100 }
 101
 102 q {
 103     quotes: none;
 104 }
 105 q:before, q:after {
 106     content: "";
 107     content: none;
 108 }
 109 small {
 110     font-size: 85%;
 111 }
 112
 113 /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
 114 sub, sup {
 115     font-size: 75%;
 116     line-height: 0;
 117     position: relative;
 118     vertical-align: baseline;
 119 }
 120 sup {
 121     top: -0.5em;
 122 }
 123 sub {
 124     bottom: -0.25em;
 125 }
 126 img {
 127     border: 0 none;
 128     /*vertical-align: middle;*/
 129 }
 130 a {
 131     color: #88a9d2;
 132     text-decoration: none;
 133     margin-bottom: 1px;
 134 }
 135 a:hover img {
 136     text-decoration: none;
 137 }
 138 blockquote {
 139     background: #444;
 140     color: #eec;
 141     text-indent: 5px;
 142     padding: 5px;
 143     border: 1px #aaa solid;
 144     border-radius: 5px;
 145 }
 146 a:hover {
 147     color: #729fcf;
 148     border-bottom: 1px dotted #729fcf;
 149 }
 150 .required {
 151     display: inline;
 152     color: #ff0;
 153     font-size: 16px;
 154     font-weight: bold;
 155     margin: 3px;
 156 }
 157 .fakelink, .lockview {
 158     color: #729fcf;
 159     cursor: pointer;
 160 }
 161 .fakelink:hover {
 162     color: #729fcf;
 163 }
 164 .smalltext {
 165     font-size: 0.7em;
 166 }
 167 #panel {
 168     position: absolute;
 169     font-size: 0.8em;
 170     -webkit-border-radius: 5px;
 171     -moz-border-radius: 5px;
 172     border-radius: 5px;
 173     border: 1px solid #fff;
 174     background-color: #2e302e;
 175     color: #eeeeec;
 176     padding: 1em;
 177 }
 178 .pager {
 179     margin-top: 60px;
 180     display: block;
 181     clear: both;
 182     text-align: center;
 183 }
 184 .pager span {
 185     padding: 4px;
 186     margin: 4px;
 187 }
 188 .pager_current {
 189     background-color: #729fcf;
 190     color: #fff;
 191 }
 192
 193
 194 /**
 195  * global
 196  */
 197 /* .tool .action */
 198 .action {
 199     margin: 5px 0;
 200 }
 201 .tool {
 202     margin: 5px 0;
 203     list-style: none;
 204 }
 205 #articlemain {
 206     width: 100%;
 207     height: 100%;
 208     margin: 0 auto;
 209 }
 210
 211
 212 /**
 213  * login
 214  */
 215 #asidemain .field {
 216     overflow: hidden;
 217     width: 200px;
 218 }
 219 #login-extra-links {
 220     overflow: auto !important;
 221     padding-top: 60px !important;
 222     width: 100% !important;
 223 }
 224 #login-extra-links a {
 225     margin-right: 20px;
 226 }
 227 #login_standard {
 228     display: block !important;
 229     float: none !important;
 230     height: 100% !important;
 231     position: relative !important;
 232     width: 100% !important;
 233 }
 234 #login_standard .field label {
 235     width: 200px !important;
 236 }
 237 #login_standard input, #login_standard input[type="text"] {
 238     margin: 0 0 8px !important;
 239     width: 210px !important;
 240 }
 241 #login-submit-wrapper {
 242     margin: 0 !important;
 243 }
 244 #login-submit-button {
 245     margin-left: 0px !important;
 246 }
 247 #asidemain #login_openid {
 248     position: relative !important;
 249     float: none !important;
 250     margin-left: 0px !important;
 251     height: auto !important;
 252     width: 200px !important;
 253 }
 254 #login_openid #id_openid_url {
 255     width: 180px !important;
 256     overflow: hidden !important;
 257 }
 258 #login_openid label {
 259     width: 180px !important;
 260 }
 261
 262
 263 /**
 264  * nav
 265  */
 266 nav {
 267     height: 60px;
 268     background-color: #1d1f1d;
 269     color: #eeeeec;
 270     position: relative;
 271     padding: 20px 20px 10px 95px;
 272 }
 273 nav a {
 274     text-decoration: none;
 275     color: #eeeeec;
 276     border: 0px;
 277 }
 278 nav a:hover {
 279     text-decoration: none;
 280     color: #eeeeec;
 281     border: 0px;
 282 }
 283 nav #banner {
 284     display: block;
 285     position: absolute;
 286     left: 51px;
 287     top: 25px;
 288 }
 289 nav #banner #logo-text a {
 290     font-size: 40px;
 291     font-weight: bold;
 292     margin-left: 3px;
 293 }
 294 ul#user-menu-popup {
 295     display: none;
 296     position: absolute;
 297     background-color: #555753;
 298     width: 100%;
 299     padding: 10px 0px;
 300     margin: 0px;
 301     top: 20px;
 302     left: 0;
 303     -webkit-border-radius: 0 0 5px 5px;
 304     -moz-border-radius: 0 0 5px 5px;
 305     border-radius: 0 0 5px 5px;
 306     box-shadow: 5px 10px 10px 0 #111;
 307     z-index: 10000;
 308 }
 309 ul#user-menu-popup li {
 310     display: block;
 311 }
 312 ul#user-menu-popup li a {
 313     display: block;
 314     padding: 5px;
 315 }
 316 ul#user-menu-popup li a:hover {
 317     color: #2e302e;
 318     background-color: #eeeeec;
 319 }
 320 ul#user-menu-popup li a.nav-sep {
 321     border-top: 1px solid #eeeeec;
 322 }
 323 nav .nav-link {
 324     float: right;
 325     display: block;
 326     width: 22px;
 327     height: 22px;
 328     overflow: hidden;
 329     margin: 0px 5px 5px;
 330     text-indent: 50px;
 331     background: transparent url(icons.png) 0 0 no-repeat;
 332 }
 333 #nav-apps-link {
 334     background-position: 0 -66px;
 335 }
 336 #nav-apps-link:hover {
 337     background-position: -22px -66px;
 338 }
 339 #nav-community-link {
 340     background-position: 0 -22px;
 341 }
 342 #nav-community-link:hover {
 343     background-position: -22px -22px;
 344 }
 345 #nav-contacts-link {
 346     background-position: 0 -22px;
 347 }
 348 #nav-contacts-link:hover {
 349     background-position: -22px -22px;
 350 }
 351 #nav-directory-link {
 352     background-position: -44px -154px;
 353 }
 354 #nav-directory-link:hover {
 355     background-position: -66px -154px;
 356 }
 357 #nav-help-link {
 358     background-position: 0 -110px;
 359 }
 360 #nav-help-link:hover {
 361     background-position: -22px -110px;
 362 }
 363 #nav-home-link {
 364     background-position: -44px -132px;
 365 }
 366 #nav-home-link:hover {
 367     background-position: -66px -132px;
 368 }
 369 #nav-intro-link {
 370     background-position: 0px -190px;
 371 }
 372 #nav-intro-link:hover {
 373     background-position: -44px -190px;
 374 }
 375 #nav-login-link {
 376     background-position: 0 -88px;
 377 }
 378 #nav-login-link:hover {
 379     background-position: -22px -88px;
 380 }
 381 #nav-logout-link {
 382     background-position: 0 -88px;
 383 }
 384 #nav-logout-link:hover {
 385     background-position: -22px -88px;
 386 }
 387 #nav-messages-link {
 388     background-position: -44px -88px;
 389 }
 390 #nav-messages-link:hover {
 391     background-position: -66px -88px;
 392 }
 393 #nav-notify-link, #nav-notifications-linkmenu {
 394     background-position: -44px -110px;
 395 }
 396 #nav-notify-link:hover {
 397     background-position: -66px -110px;
 398 }
 399 #nav-network-link {
 400     background-position: 0px -177px;
 401 }
 402 #nav-network-link:hover {
 403     background-position: -22px -177px;
 404 }
 405 #nav-search-link {
 406     background-position: 0 -44px;
 407 }
 408 #nav-search-link:hover {
 409     background-position: -22px -44px;
 410 }
 411 #profile-link,
 412 #profile-title,
 413 #wall-image-upload,
 414 #wall-file-upload,
 415 #profile-attach-wrapper,
 416 #profile-audio,
 417 #profile-link,
 418 #profile-location,
 419 #profile-nolocation,
 420 #profile-title,
 421 #jot-title,
 422 #profile-upload-wrapper,
 423 #profile-video,
 424 #profile-jot-submit,
 425 #wall-image-upload-div,
 426 #wall-file-upload-div,
 427 .icon, .hover, .focus, .pointer {
 428     cursor: pointer;
 429 }
 430 /* popup notifications */
 431 div.jGrowl div.notice {
 432     background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 433     color: #ffffff;
 434     padding-left: 58px;
 435 }
 436 div.jGrowl div.info {
 437     background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 438     color: #ffffff;
 439     padding-left: 58px;
 440 }
 441 #nav-notifications-menu {
 442     margin: 30px 0 0 -20px;
 443     width: 275px;
 444     max-height: 300px;
 445     overflow-y: auto;
 446     font-size: 9pt;
 447 }
 448 #nav-notifications-menu .contactname {
 449     font-weight: bold;
 450     font-size: 0.9em;
 451 }
 452 #nav-notifications-menu img {
 453     float: left;
 454     margin-right: 5px;
 455 }
 456 #nav-notifications-menu .notif-when {
 457     font-size: 0.8em;
 458     display: block;
 459 }
 460 #nav-notifications-menu li {
 461     padding: 7px 0px 7px 10px;
 462     word-wrap: normal;
 463     border-bottom: 1px solid #000;
 464 }
 465 #nav-notifications-menu li:hover {
 466     color: black;
 467 }
 468 #nav-notifications-menu a:hover {
 469     color: black;
 470     text-decoration: underline;
 471 }
 472 nav #nav-notifications-linkmenu.on .icon.s22.notify,
 473 nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 474     background-image: url("../../../images/icons/22/notify_on.png");
 475 }
 476 .show {
 477     display: block;
 478 }
 479 #notifications {
 480     height: 20px;
 481     width: 170px;
 482     position: absolute;
 483     top: -19px;
 484     left: 7px;
 485 }
 486 #nav-floater {
 487     position: fixed;
 488     top: 20px;
 489     right: 1%;
 490     padding: 5px;
 491     background: #1d1f1d;
 492     color: transparent;
 493     border-radius: 5px;
 494     z-index: 100;
 495     width: 300px;
 496     height: 60px;
 497 }
 498 #nav-buttons {
 499     clear: both;
 500     list-style: none;
 501     padding: 0px;
 502     margin: 0 7px 0 0;
 503     height: 25px;
 504 }
 505 #nav-buttons li {
 506     padding: 0;
 507 }
 508 .floaterflip {
 509     display: block;
 510     position: fixed;
 511     z-index: 110;
 512     top: 56px;
 513     right: 19px;
 514     width: 22px;
 515     height: 22px;
 516     overflow: hidden;
 517     margin: 0px;
 518     background: transparent url(icons.png) -190px -60px no-repeat;
 519 }
 520 .search-box {
 521     display: inline-block;
 522     margin: 5px;
 523     position: fixed;
 524     right: 0px;
 525     bottom: 0px;
 526     z-index: 100;
 527     background: #1d1f1d;
 528     border-radius: 5px;
 529 }
 530 #search-text {
 531     border: 1px #eec solid;
 532     background: #2e2f2e;
 533     color: #eec;
 534 }
 535 .search-box #search-text {
 536     margin: 8px;
 537     width: 10em;
 538     height: 14px;
 539     color: #eec;
 540 }
 541 #scrollup {
 542     position: fixed;
 543     right: 5px;
 544     bottom: 40px;
 545     z-index: 100;
 546 }
 547 #scrollup a:hover {
 548     text-decoration: none;
 549     border: 0;
 550 }
 551 #user-menu {
 552     box-shadow: 5px 0 10px 0 #111;
 553     display: block;
 554     width: 75%;
 555     margin: 3px 0 0 0;
 556     position: relative;
 557     background-color: #555753;
 558     -webkit-border-radius: 5px;
 559     -moz-border-radius: 5px;
 560     border-radius: 5px;
 561     background: #555753 url("menu-user-pin.jpg") 98% center no-repeat;
 562     clear: both;
 563     top: 4px;
 564     left: 10px;
 565     padding: 2px;
 566 }
 567 #user-menu > a {
 568     vertical-align: top;
 569 }
 570 #user-menu-label {
 571     font-size: 12px;
 572     padding: 3px 20px 9px 5px;
 573     height: 10px;
 574 }
 575 .nav-ajax-update, .nav-ajax-left {
 576     width: 30px;
 577     height: 19px;
 578     background: transparent url(notifications.png) 0 0 no-repeat;
 579     color: #222;
 580     font-weight: bold;
 581     font-size: 0.8em;
 582     padding-top: 0.2em;
 583     text-align: center;
 584     float: left;
 585     margin: 0 -1px 0 3px;
 586     display: block;
 587     visibility: hidden;
 588 }
 589 .nav-ajax-update.show, .nav-ajax-left.show {
 590     visibility: visible;
 591 }
 592 #net-update {
 593     background-position: 0px 0px;
 594 }
 595 #mail-update {
 596     background-position: -30px 0;
 597 }
 598 #notify-update {
 599     background-position: -60px 0px;
 600 }
 601 #home-update {
 602     background-position: -90px 0px;
 603 }
 604 #intro-update {
 605     background-position: -120px 0px;
 606 }
 607 #lang-select-icon {
 608     cursor: pointer;
 609     position: fixed;
 610     left: 28px;
 611     bottom: 6px;
 612     z-index: 10;
 613 }
 614 #language-selector {
 615     position: fixed;
 616     bottom: 2px;
 617     left: 52px;
 618     z-index: 10;
 619 }
 620 .menu-popup {
 621     position: absolute;
 622     display: none;
 623     width: 11em;
 624     background: #ffffff;
 625     color: #2d2d2d;
 626     margin: 0px;
 627     padding: 0px;
 628     list-style: none;
 629     border: 3px solid #364e59;
 630     z-index: 100000;
 631     -webkit-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.7);
 632     -moz-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.7);
 633     box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.7);
 634 }
 635 .menu-popup a {
 636     display: block;
 637     color: #2d2d2d;
 638     padding: 5px 10px;
 639     text-decoration: none;
 640 }
 641 .menu-popup a:hover {
 642     background-color: #bdcdd4;
 643 }
 644 .menu-popup .menu-sep {
 645     border-top: 1px solid #9eabb0;
 646 }
 647 .menu-popup li {
 648     float: none;
 649     overflow: auto;
 650     height: auto;
 651     display: block;
 652 }
 653 .menu-popup li img {
 654     float: left;
 655     width: 16px;
 656     height: 16px;
 657     padding-right: 5px;
 658 }
 659 .menu-popup .empty {
 660     padding: 5px;
 661     text-align: center;
 662     color: #9eabb0;
 663 }
 664 .notif-item {
 665     font-size: small;
 666 }
 667 .notif-item a {
 668     vertical-align: middle;
 669 }
 670 .notif-image {
 671     width: 32px;
 672     height: 32px;
 673     padding: 7px 7px 0px 0px;
 674 }
 675 .notify-seen {
 676     background: #ddd;
 677 }
 678
 679
 680 /**
 681  * sysmsg
 682  */
 683 #sysmsg_info {
 684     position: fixed;
 685     bottom: 0;
 686     -moz-box-shadow: 3px 3px 3px 10px 0 #000;
 687     -webkit-box-shadow: 3px 3px 10px 0 #000;
 688     box-shadow: 3px 3px 10px 0 #000;
 689     padding: 10px;
 690     background-color: #fcaf3e;
 691     border:2px solid #f8911b;
 692     border-bottom: 0;
 693     padding-bottom: 50px;
 694     z-index: 1000;
 695 }
 696 #sysmsg {
 697     position: fixed;
 698     bottom: 0;
 699     -moz-box-shadow: 3px 3px 10px 0 #000;
 700     -webkit-box-shadow: 3px 3px 10px 0 #000;
 701     box-shadow: 3px 3px 10px 0 #000;
 702     padding: 10px;
 703     background-color: #fcaf3e;
 704     border: 2px solid #f8911b;
 705     border-bottom: 0;
 706     padding-bottom: 50px;
 707     z-index: 1000;
 708 }
 709 #sysmsg_info br,
 710 #sysmsg br {
 711     display: block;
 712     margin: 2px 0px;
 713     border-top: 1px solid #ccccce;
 714 }
 715
 716
 717 /**
 718  * aside
 719  */
 720 #asidemain {
 721     float: left;
 722     font-size: smaller;
 723     margin: 20px 0 20px 35px;
 724     width: 25%;
 725     display: inline;
 726 }
 727 /* for now, disappear these */
 728 #asideright, #asideleft {
 729     display: none;
 730 }
 731 .vcard .fn {
 732     font-size: 1.7em;
 733     font-weight: bold;
 734     border-bottom: 1px solid #729fcf;
 735     padding-bottom: 3px;
 736 }
 737 .vcard #profile-photo-wrapper {
 738     margin: 20px;
 739 }
 740 /* http://css-tricks.com/snippets/css/css-box-shadow/
 741 * box-shadow:
 742 * 1. The horizontal offset of the shadow, positive means
 743 * the shadow will be on the right of the box, a negative
 744 * offset will put the shadow on the left of the box.
 745 * 2. The vertical offset of the shadow, a negative one
 746 * means the box-shadow will be above the box, a
 747 * positive one means the shadow will be below the box.
 748 * 3. The blur radius (optional), if set to 0 the shadow
 749 * will be sharp, the higher the number, the more blurred
 750 * it will be.
 751 * 4. The spread radius (optional), positive values increase
 752 * the size of the shadow, negative values decrease the size.
 753 * Default is 0 (the shadow is same size as blur).
 754 * 5. Colo[u]r
 755 */
 756 .vcard #profile-photo-wrapper img {
 757     box-shadow: 3px 3px 10px 0 #000;
 758 }
 759 #asidemain h4 {
 760     font-size: 1.2em;
 761 }
 762 #asidemain #viewcontacts {
 763     text-align: right;
 764 }
 765 .aprofile dt {
 766     background: #eec;
 767     color: #2e2f2e;
 768     font-weight: bold;
 769     box-shadow: 1px 1px 5px 0 #000;
 770     margin: 15px 0 5px;
 771     padding-left: 5px;
 772 }
 773 #profile-extra-links ul {
 774     margin-left: 0px;
 775     padding-left: 0px;
 776     list-style: none;
 777 }
 778 #dfrn-request-link {
 779     background: #3465A4 url(connect.png) no-repeat 95% center;
 780     border-radius: 5px 5px 5px 5px;
 781     color: #eec;
 782     display: block;
 783     font-size: 1.2em;
 784     padding: 0.2em 0.5em;
 785 }
 786 #wallmessage-link {
 787     /*background: #3465A4 url(connect.png) no-repeat 95% center;*/
 788     /*border-radius: 5px 5px 5px 5px;*/
 789     color: #eee;
 790     display: block;
 791     font-size: 1.2em;
 792     padding: 0.2em 0.5em;
 793 }
 794 #netsearch-box {
 795     margin: 20px 0px 30px;
 796     width: 150px;
 797 }
 798 #netsearch-box #search-submit {
 799     margin: 5px 5px 0px 0px;
 800 }
 801 .ttright {
 802     margin: 0px 0px 0px 0px;
 803 }
 804
 805
 806 /**
 807  * contacts block
 808  */
 809 .contact-block-div {
 810     width: 50px;
 811     height: 50px;
 812     float: left;
 813 }
 814 .contact-block-textdiv {
 815     width: 150px;
 816     height: 34px;
 817     float: left;
 818 }
 819 #contact-block-end {
 820     clear: both;
 821 }
 822
 823
 824 /**
 825  * jot
 826  */
 827 #jot {
 828 /*width: 785px;*/
 829 margin: 10px 0 20px 0px;
 830 width: 100%;
 831 }
 832 #jot #jot-tools {
 833 margin: 0px;
 834 padding: 0px;
 835 height: 35px;
 836 overflow: none;
 837 width: 100%;
 838 /*background-color: #0e232e;*/
 839 /*border-bottom: 2px solid #9eabb0;*/
 840 }
 841 #jot #jot-tools span {
 842     float: left;
 843     margin: 10px 20px 2px 0px;
 844 }
 845 #jot #jot-tools span a {
 846     display: block;
 847 }
 848 #jot #jot-tools .perms {
 849     float: right;
 850     width: 40px;
 851 }
 852 #jot #jot-tools li.loading {
 853     float: right;
 854     background-color: #ffffff;
 855     width: 20px;
 856     vertical-align: center;
 857     text-align: center;
 858     border-top: 2px solid #9eabb0;
 859     height: 38px;
 860 }
 861 #jot #jot-tools li.loading img {
 862     margin-top: 10px;
 863 }
 864 #jot #jot-title {
 865     border: 1px solid #ccc;
 866     margin: 0 0 5px;
 867     height: 20px;
 868     width: 90%;
 869     font-weight: bold;
 870     border-radius: 5px;
 871     vertical-align: middle;
 872 }
 873 #jot-category {
 874     margin: 5px 0;
 875     border-radius: 5px;
 876     border: 1px #999 solid;
 877     color: #aaa;
 878     font-size: smaller;
 879 }
 880 #jot-category:focus {
 881     color: #eee;
 882 }
 883 #jot #character-counter {
 884     width: 6%;
 885     float: right;
 886     text-align: right;
 887     height: 15px;
 888     line-height: 20px;
 889     padding: 2px 20px 5px 0;
 890 }
 891 #profile-jot-text_parent {
 892     /*border-radius: 10px;*/
 893     box-shadow: 5px 0 10px 0 #111;
 894 }
 895 #profile-jot-text_tbl {
 896     margin-bottom: 10px;
 897     /*border-radius: 10px;*/
 898     background: #888;
 899 }
 900 #profile-jot-text_ifr {
 901     width:99.900002% !important;
 902 }
 903 #profile-jot-text_toolbargroup {
 904     background: #888;
 905 }
 906 .mceCenter table tr {
 907     background: #888;
 908 }
 909 [id$="jot-text_ifr"] {
 910     width: 99.900002% !important;
 911     color: #2e2f2e;
 912     background: #eec;
 913 }
 914 [id$="jot-text_ifr"] .mceContentBody {
 915     color: #2e2f2e;
 916     background: #eec;
 917 }
 918 .mceFirst tr {
 919     background: #888;
 920 }
 921 .mceFirst td {
 922     /*border-radius: 10px 10px 0px 0px;*/
 923 }
 924 .mceLast td {
 925     /*border-radius: 0 0 10px 10px;*/
 926 }
 927 #profile-attach-wrapper,
 928 #profile-audio-wrapper,
 929 #profile-link-wrapper,
 930 #profile-location-wrapper,
 931 #profile-nolocation-wrapper,
 932 #profile-title-wrapper,
 933 #profile-upload-wrapper,
 934 #profile-video-wrapper {
 935     float: left;
 936     margin: 0 20px 0 0;
 937 }
 938 #profile-rotator-wrapper {
 939     float: right;
 940 }
 941 #profile-jot-tools-end,
 942 #profile-jot-banner-end {
 943     clear: both;
 944 }
 945 #profile-jot-email-wrapper {
 946     margin:10px 10% 0;
 947     border:1px solid #555753;
 948     border-bottom:0;
 949 }
 950 #profile-jot-email-label {
 951     background-color:#555753;
 952     color:#ccccce;
 953     padding:5px;
 954 }
 955 #profile-jot-email {
 956     width:90%;
 957     margin:5px;
 958 }
 959 #profile-jot-networks {
 960     margin: 0 10%;
 961     border: 1px solid #555753;
 962     border-top: 0;
 963     border-bottom: 0;
 964     padding: 5px;
 965 }
 966 #profile-jot-net {
 967     margin: 5px 0;
 968 }
 969 #jot-preview-link {
 970     margin: 0 0 0 10px;
 971     border: 0;
 972     text-decoration: none;
 973     float: right;
 974 }
 975 .icon-text-preview {
 976     margin: 0 0 -18px 0;
 977     display: block;
 978     width: 20px;
 979     height: 20px;
 980     background: url(icons.png) no-repeat -128px -40px;
 981     border: 0;
 982     text-decoration: none;
 983     float: right;
 984     cursor: pointer;
 985 }
 986 #profile-jot-perms {
 987     float: right;
 988     background-color: #555753;
 989     height: 22px;
 990     width: 20px;
 991     -webkit-border-radius: 5px;
 992     -moz-border-radius: 5px;
 993     border-radius: 5px;
 994     overflow: hidden;
 995     border: 0px;
 996     margin: 0 10px 0 10px;
 997 }
 998 #profile-jot-plugin-wrapper {
 999     width: 1px;
1000     margin: 10px 0 0 0;
1001     float: right;
1002 }
1003 #profile-jot-submit-wrapper {
1004     float: right;
1005     width: 100%;
1006     list-style: none;
1007     margin: 10px 0 0 0;
1008     padding: 0;
1009 }
1010 #profile-jot-submit {
1011     height: auto;
1012     background-color: #555753;
1013     color: #eeeeec;
1014     -webkit-border-radius: 5px;
1015     -moz-border-radius: 5px;
1016     border-radius: 5px;
1017     border: 2px outset #222420;
1018     margin: 0;
1019     float: right;
1020     text-shadow: 1px 1px #111;
1021     width: auto;
1022 }
1023 #profile-jot-submit:active {
1024     box-shadow: 0 0 0 0;
1025 }
1026 #jot-perms-icon {
1027     height: 22px;
1028     width: 20px;
1029     -webkit-border-radius: 5px;
1030     -moz-border-radius: 5px;
1031     border-radius: 5px;
1032     overflow: hidden;
1033     border: 0;
1034 }
1035 #profile-jot-acl-wrapper {
1036     margin: 0 10px;
1037     border: 1px solid #555753;
1038     border-top: 0;
1039     display: block !important;
1040 }
1041 #group_allow_wrapper,
1042 #group_deny_wrapper,
1043 #acl-permit-outer-wrapper {
1044     width:47%;
1045     float:left;
1046 }
1047 #contact_allow_wrapper,
1048 #contact_deny_wrapper,
1049 #acl-deny-outer-wrapper {
1050     width:47%;
1051     float:right;
1052 }
1053 #acl-permit-text {
1054     background-color: #555753;
1055     color: #ccccce;
1056     padding: 5px;
1057     float: left;
1058 }
1059 #jot-public {
1060     background-color: #555753;
1061     color: #ff0000;
1062     padding: 5px;
1063     float: left;
1064 }
1065 #acl-deny-text {
1066     background-color: #555753;
1067     color: #ccccce;
1068     padding: 5px;
1069     float: left;
1070 }
1071 #acl-permit-text-end,
1072 #acl-deny-text-end {
1073     clear: both;
1074 }
1075 #jot-title-desc {
1076     color: #ccc;
1077 }
1078 #profile-jot-desc {
1079     color: #ff2000;
1080     margin: 5px 0;
1081 }
1082 #jot-title-wrapper {
1083     margin-bottom: 5px;
1084 }
1085 #jot-title-display {
1086     font-weight: bold;
1087 }
1088 .jothidden {
1089     display: none;
1090 }
1091 #jot-preview-content {
1092     background-color: #3e3f3e;
1093     color: #eec;
1094     border: 1px #eec solid;
1095     border-radius: 5px;
1096     padding: 3px 3px 6px 10px;
1097 }
1098 #jot-preview-content .wall-item-outside-wrapper {
1099     border: 0;
1100     border-radius: 0px;
1101 }
1102
1103
1104 /**
1105  * section
1106  */
1107 #sectionmain {
1108     margin: 20px;
1109     font-size: 0.8em;
1110     min-width: 475px;
1111     width: 67%;
1112     float: left;
1113     display: inline;
1114 }
1115
1116 /**
1117  * tabs
1118  */
1119 .tabs {
1120     list-style: none;
1121     margin: 10px 0;
1122     padding: 0;
1123 }
1124 .tabs li {
1125     display: inline;
1126     font-size: smaller;
1127     font-weight: bold;
1128 }
1129 .tab {
1130     border: 1px solid #729fcf;
1131     padding: 4px;
1132 }
1133 .tab:hover, .tab.active:hover {
1134     background: #88a9d2;
1135     color: #2e2f2e;
1136 }
1137 .tab:active {
1138     background: #88a9d2;
1139     color: #2e2f2e;
1140 }
1141 .tab.active {
1142     background: #88a9d2;
1143     color: #2e2f2e;
1144 }
1145 .tab.active a {
1146     color: #2e2f2e;
1147 }
1148 .tab a {
1149     border: 0;
1150     text-decoration: none;
1151 }
1152
1153
1154 /**
1155  * items
1156  */
1157 .wall-item-outside-wrapper {
1158     border: 1px solid #aaa;
1159     border-radius: 5px;
1160     box-shadow: 5px 0 10px 0 #111;
1161 }
1162 .wall-item-outside-wrapper.comment {
1163     margin-top: 5px;
1164 }
1165 .wall-item-outside-wrapper-end {
1166     clear: both;
1167 }
1168 .wall-item-content-wrapper {
1169     position: relative;
1170     padding: 10px;
1171     width: auto;
1172 }
1173 .wall-item-outside-wrapper .wall-item-comment-wrapper {
1174     /*margin-left: 90px;*/
1175 }
1176 .shiny {
1177     background: #2e3436;
1178     border-radius: 5px;
1179 }
1180 .wall-outside-wrapper .shiny {
1181     border-radius: 5px;
1182 }
1183 .heart {
1184     color: red;
1185 }
1186 .wall-item-content {
1187     overflow-x: auto;
1188     margin: 0px 15px 0px 5px;
1189 }
1190 /* removing it from here, vs. putting it in .wall-item-content
1191 * might break things for people. we shall see ;) */
1192 [id^="tread-wrapper"], [class^="tread-wrapper"] {
1193     margin: 15px 0 0 0;
1194     padding: 0px;
1195     /*overflow-x: auto;*/
1196 }
1197 .wall-item-photo-menu {
1198     display: none;
1199 }
1200 .wall-item-photo-menu-button {
1201     display:none;
1202     text-indent:-99999px;
1203     background:#555753 url(menu-user-pin.jpg) no-repeat 75px center;
1204     position:absolute;
1205     overflow:hidden;
1206     height:20px;
1207     width:90px;
1208     top:85px;
1209     left:0;
1210     -webkit-border-radius:0 0 5px 5px;
1211     -moz-border-radius:0 0 5px 5px;
1212     border-radius:0 0 5px 5px;
1213 }
1214 .wall-item-info {
1215     float: left;
1216     width: 110px;
1217 }
1218 .wall-item-photo-wrapper {
1219     width: 80px;
1220     height: 80px;
1221     position: relative;
1222     padding: 5px;
1223     background-color: #555753;
1224     -webkit-border-radius: 5px;
1225     -moz-border-radius: 5px;
1226     border-radius: 5px;
1227 }
1228 [class^="wall-item-tools"] > *, [class^="wall-item-tools"] > * > * {
1229     /*margin: 0 0 5px 0;*/
1230 }
1231 .wall-item-tools {
1232     float: right;
1233     filter: alpha(opacity=35);
1234     opacity: 0.4;
1235     -webkit-transition: all 1s ease-in-out;
1236     -moz-transition: all 1s ease-in-out;
1237     -o-transition: all 1s ease-in-out;
1238     -ms-transition: all 1s ease-in-out;
1239     transition: all 1s ease-in-out;
1240 }
1241 .wall-item-tools:hover {
1242     filter: alpha(opacity=100);
1243     opacity: 1;
1244     -webkit-transition: all 1s ease-in-out;
1245     -moz-transition: all 1s ease-in-out;
1246     -o-transition: all 1s ease-in-out;
1247     -ms-transition: all 1s ease-in-out;
1248     transition: all 1s ease-in-out;
1249 }
1250 .wall-item-subtools1 {
1251     height: 30px;
1252     list-style: none outside none;
1253     margin: 20px 0 30px -20px;
1254     padding: 0;
1255     width: 30px;
1256 }
1257 .wall-item-subtools2 {
1258     height: 25px;
1259     list-style: none outside none;
1260     margin: -75px 0 0 5px;
1261     padding: 0;
1262     width: 25px;
1263 }
1264 .wall-item-title {
1265     font-size: 1.2em;
1266     font-weight: bold;
1267     margin-bottom: 1em;
1268 }
1269 .wall-item-body {
1270     margin: 20px 20px 10px 0px;
1271     text-align: left;
1272     overflow-x: auto;
1273 }
1274 .wall-item-lock-wrapper {
1275     float: right;
1276     height: 22px;
1277     margin: 0 -5px 0 0;
1278     width: 22px;
1279     opacity: 1;
1280 }
1281 .wall-item-dislike,
1282 .wall-item-like {
1283     clear: left;
1284     font-size: 0.8em;
1285     color: #878883;
1286     margin: 5px 0 5px 120px;
1287 }
1288 .wall-item-author, .wall-item-actions-author {
1289     clear: left;
1290     font-size: 0.8em;
1291     color: #878883;
1292     margin: 20px 20px 0 110px;
1293 }
1294 .wall-item-ago {
1295     display: inline;
1296     padding-left: 10px;
1297 }
1298 .wall-item-wrapper-end {
1299     clear:both;
1300 }
1301 .wall-item-location {
1302     margin-top: 15px;
1303     width: 100px;
1304     overflow: hidden;
1305     text-overflow: ellipsis;
1306     -o-text-overflow: ellipsis;
1307 }
1308 .wall-item-location .icon {
1309     float: left;
1310 }
1311 .wall-item-location > a {
1312     margin-left: 25px;
1313     font-size: 0.7em;
1314     display: block;
1315 }
1316 .wall-item-location .smalltext {
1317     margin-left: 25px;
1318     font-size: 0.7em;
1319     display: block;
1320 }
1321 .wall-item-location > br {
1322     display: none;
1323 }
1324 .wallwall .wwto {
1325     left: 5px;
1326     margin: 0;
1327     position: absolute;
1328     top: 75px;
1329     width: 30px;
1330     z-index: 10001;
1331     width: 30px;
1332     height: 30px;
1333 }
1334 .wallwall .wwto img {
1335     width: 30px !important;
1336     height: 30px !important;
1337 }
1338 .wallwall .wall-item-photo-end {
1339     clear: both;
1340 }
1341 .wall-item-arrowphoto-wrapper {
1342     position: absolute;
1343     left: 35px;
1344     top: 80px;
1345     z-index: 10002;
1346 }
1347 .wall-item-photo-menu {
1348     min-width: 92px;
1349     border: 2px solid #FFFFFF;
1350     border-top: 0px;
1351     background: #555753;
1352     position: absolute;
1353     left: -2px; top: 101px;
1354     display: none;
1355     z-index: 10003;
1356     -webkit-border-radius: 0px 5px 5px 5px;
1357     -moz-border-radius: 0px 5px 5px 5px;
1358     border-radius: 0px 5px 5px 5px;
1359 }
1360 .wall-item-photo-menu ul {
1361     margin:0px;
1362     padding: 0px;
1363     list-style: none;
1364 }
1365 .wall-item-photo-menu li a {
1366     white-space: nowrap;
1367     display: block;
1368     padding: 5px 2px;
1369     color: #eeeeec;
1370 }
1371 .wall-item-photo-menu li a:hover {
1372     color: #555753;
1373     background: #eeeeec;
1374 }
1375 #item-delete-selected {
1376     overflow: auto;
1377     width: 100%;
1378 }
1379 #connect-services-header {
1380     margin: 5px 0 0 0;
1381 }
1382 #connect-services {
1383     margin: 5px 0 0 0;
1384 }
1385 #extra-help-header {
1386     margin: 5px 0 0 0;
1387 }
1388 #extra-help {
1389     margin: 5px 0 0 0;
1390 }
1391 #postit-header {
1392     margin: 5px 0 0 0;
1393 }
1394 #postit {
1395     margin: 5px 0 0 0;
1396 }
1397
1398
1399 /**
1400  * comment
1401  */
1402 .ccollapse-wrapper {
1403     font-size: 0.9em;
1404     margin-left: 80px;
1405 }
1406
1407 .wall-item-outside-wrapper.comment {
1408     margin-left: 80px;
1409 }
1410 .wall-item-outside-wrapper.comment .wall-item-photo {
1411     width: 40px!important;
1412     height: 40px!important;
1413 }
1414 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {
1415     width: 40px;
1416     height: 40px;
1417 }
1418 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
1419     width: 50px;
1420     top: 45px;
1421     background-position: 35px center;
1422 }
1423 .wall-item-outside-wrapper.comment .wall-item-info {
1424     width: 60px;
1425 }
1426 .wall-item-outside-wrapper.comment .wall-item-body {
1427     margin-left: 10px;
1428 }
1429 .wall-item-outside-wrapper.comment .wall-item-author {
1430     margin-left: 50px;
1431 }
1432
1433 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
1434     min-width: 50px;
1435     top: 60px;
1436 }
1437 .comment-wwedit-wrapper {
1438     /*margin: 30px 0px 0px 80px;*/
1439 }
1440 .comment-edit-wrapper {
1441     border-top: 1px #aaa solid;
1442 }
1443 .comment-wwedit-wrapper img,
1444 .comment-edit-wrapper img {
1445     width: 20px;
1446     height: 20px;
1447 }
1448 .comment-edit-photo-link, .comment-edit-photo {
1449     float: left;
1450     margin-left: 10px;
1451 }
1452 .my-comment-photo {
1453     width: 40px;
1454     height: 40px;
1455     padding: 5px;
1456 }
1457 [class^="comment-edit-text"] {
1458     margin: 5px 0 10px 20px;
1459     width: 84.5%;
1460 }
1461 .comment-edit-text-empty {
1462     height: 20px;
1463     border: 2px #c8bebe solid;
1464     border-radius: 5px;
1465     color: #c8bebe;
1466     -webkit-transition: all 0.5s ease-in-out;
1467     -moz-transition: all 0.5s ease-in-out;
1468     -o-transition: all 0.5s ease-in-out;
1469     -ms-transition: all 0.5s ease-in-out;
1470     transition: all 0.5s ease-in-out;
1471 }
1472 .comment-edit-text-empty:hover {
1473     color: #999999;
1474 }
1475 .comment-edit-text-full {
1476     height: 10em;
1477     border-radius: 5px;
1478     -webkit-transition: all 0.5s ease-in-out;
1479     -moz-transition: all 0.5s ease-in-out;
1480     -o-transition: all 0.5s ease-in-out;
1481     -ms-transition: all 0.5s ease-in-out;
1482     transition: all 0.5s ease-in-out;
1483 }
1484 .comment-edit-submit-wrapper {
1485     width: 90%;
1486     margin: 5px 5px 10px 50px;
1487     text-align: right;
1488 }
1489 .comment-edit-submit {
1490     height: 22px;
1491     background-color: #555753;
1492     color: #eeeeec;
1493     -webkit-border-radius: 5px;
1494     -moz-border-radius: 5px;
1495     border-radius: 5px;
1496     border: 0;
1497 }
1498
1499
1500 /**
1501  * item text style
1502  */
1503 .wall-item-body code {
1504     display: block;
1505     padding: 0 0 10px 5px;
1506     border-color: #ccc;
1507     border-style: solid;
1508     border-width: 1px 1px 1px 10px;
1509     background: #eee;
1510     color: #2e2f2e;
1511     width: 95%;
1512 }
1513
1514
1515 /**
1516  * profile
1517  */
1518 div[id$="text"] {
1519     font-weight: bold;
1520     border-bottom: 1px solid #ccc;
1521 }
1522 div[id$="wrapper"] {
1523     height: 100%;
1524     margin-bottom: 1em;
1525 }
1526 div[id$="wrapper"] br {
1527     clear: left;
1528 }
1529 #advanced-profile-with {
1530     margin-left: 200px;
1531 }
1532
1533
1534 /**
1535  * photos
1536  */
1537 .photos {
1538     height: auto;
1539     overflow: auto;
1540 }
1541 #photo-top-links {
1542     margin-bottom: 30px;
1543 }
1544 .photo-album-image-wrapper,
1545 .photo-top-image-wrapper {
1546     float: left;
1547     -moz-box-shadow: 3px 3px 10px 0 #000;
1548     -webkit-box-shadow: 3px 3px 10px 0 #000;
1549     box-shadow: 3px 3px 10px 0 #000;
1550     background-color: #222;
1551     color: #2e2f2e;
1552     -webkit-border-radius: 5px;
1553     -moz-border-radius: 5px;
1554     border-radius: 5px;
1555     padding-bottom: 30px;
1556     position: relative;
1557     margin: 0 10px 10px 0;
1558 }
1559
1560 #photo-photo {
1561     max-width: 100%;
1562 }
1563 #photo-photo img {
1564     max-width: 100%;
1565 }
1566 .photo-top-image-wrapper a:hover,
1567 #photo-photo a:hover,
1568 .photo-album-image-wrapper a:hover {
1569     border-bottom: 0;
1570 }
1571 .photo-top-photo,.photo-album-photo {
1572     -webkit-border-radius:5px 5px 0 0;
1573     -moz-border-radius:5px 5px 0 0;
1574     border-radius:5px 5px 0 0;
1575 }
1576 .photo-top-album-name {
1577     position: absolute;
1578     bottom: 0;
1579     padding: 0 5px;
1580 }
1581 .caption {
1582     position: absolute;
1583     bottom: 0;
1584     margin: 0 5px;
1585 }
1586 #photo-photo {
1587     position: relative;
1588     float:left;
1589 }
1590 #photo-photo-end {
1591     clear: both;
1592 }
1593 #photo-prev-link,
1594 #photo-next-link {
1595     position:absolute;
1596     width:30%;
1597     height:100%;
1598     background-color:rgba(255,255,255,0.5);
1599     opacity:0;
1600     -webkit-transition:all .2s ease-in-out;
1601     -moz-transition:all .2s ease-in-out;
1602     -o-transition:all .2s ease-in-out;
1603     -ms-transition:all .2s ease-in-out;
1604     transition:all .2s ease-in-out;
1605     background-position:center center;
1606     background-repeat:no-repeat;
1607 }
1608 #photo-prev-link {
1609     left:0;
1610     top:0;
1611     background-image:url(prev.png);
1612 }
1613 #photo-next-link {
1614     right:0;
1615     top:0;
1616     background-image:url(next.png);
1617 }
1618
1619 #photo-prev-link a,#photo-next-link a {
1620     display:block;
1621     width:100%;
1622     height:100%;
1623     overflow:hidden;
1624     text-indent:-900000px;
1625 }
1626 #photo-prev-link:hover,
1627 #photo-next-link:hover {
1628     opacity:1;
1629     -webkit-transition:all .2s ease-in-out;
1630     -moz-transition:all .2s ease-in-out;
1631     -o-transition:all .2s ease-in-out;
1632     -ms-transition:all .2s ease-in-out;
1633     transition:all .2s ease-in-out;
1634 }
1635 #photo-next-link .icon,
1636 #photo-prev-link .icon {
1637     display: none;
1638 }
1639 #photos-upload-spacer,
1640 #photos-upload-new-wrapper,
1641 #photos-upload-exist-wrapper {
1642     margin-bottom: 1em;
1643 }
1644 #photos-upload-existing-album-text,
1645 #photos-upload-newalbum-div {
1646     background-color:#555753;
1647     color:#eeeeec;
1648     padding:1px;
1649 }
1650 #photos-upload-album-select,
1651 #photos-upload-newalbum {
1652     width: 99%;
1653 }
1654 #photos-upload-perms-menu {
1655     text-align: right;
1656 }
1657 #photo-edit-caption, #photo-edit-newtag, #photo-edit-albumname {
1658     float: left;
1659     margin-bottom: 25px;
1660 }
1661 #photo-edit-link-wrap {
1662     margin-bottom: 15px;
1663 }
1664 #photo-edit-caption {
1665     width: 100%;
1666 }
1667 #photo-edit-newtag {
1668     width: 100%;
1669 }
1670 #photo-like-div {
1671     margin-bottom: 25px;
1672 }
1673 #photo-edit-caption-end, #photo-edit-tags-end, #photo-edit-albumname-end {
1674     clear: both;
1675 }
1676 #photo-edit-delete-button {
1677     margin-left: 200px;
1678 }
1679 #photo-edit-end {
1680     margin-bottom: 35px;
1681 }
1682 #photo-caption {
1683     font-size: 110%;
1684     font-weight: bold;
1685     margin-top: 15px;
1686     margin-bottom: 15px;
1687 }
1688
1689 /**
1690  * message
1691  */
1692 .prvmail-text {
1693     width: 100%;
1694 }
1695 #prvmail-subject {
1696     width: 100%;
1697     color: #2e2f2e;
1698     background: #eec;
1699 }
1700 #prvmail-submit-wrapper {
1701     margin-top: 10px;
1702 }
1703 #prvmail-submit {
1704     float:right;
1705     margin-top: 0;
1706 }
1707 #prvmail-submit-wrapper > div {
1708     margin-right:5px;
1709     float:left;
1710 }
1711 .mail-list-outside-wrapper {
1712     margin-top: 20px;
1713 }
1714 .mail-list-sender {
1715     float: left;
1716 }
1717 .mail-list-detail {
1718     margin-left: 90px;
1719 }
1720 .mail-list-sender-name {
1721     display: inline;
1722     font-size: 1.1em;
1723 }
1724 .mail-list-date {
1725     display: inline;
1726     font-size: 0.9em;
1727     padding-left: 10px;
1728 }
1729 .mail-list-sender-name, .mail-list-date {
1730     font-style: italic;
1731 }
1732 .mail-list-subject {
1733     font-size: 1.2em;
1734 }
1735 .mail-list-delete-wrapper {
1736     float: right;
1737 }
1738 .mail-list-outside-wrapper-end {
1739     clear: both;
1740     border-bottom: 1px #eec dotted;
1741 }
1742 .mail-conv-sender {
1743     float: left;
1744     margin: 0px 5px 5px 0px;
1745 }
1746 .mail-conv-sender-photo {
1747     width: 32px;
1748     height: 32px;
1749 }
1750 .mail-conv-sender-name {
1751     float: left;
1752 }
1753 .mail-conv-date {
1754     float: right;
1755 }
1756 .mail-conv-subject {
1757     clear: right;
1758     font-weight: bold;
1759     font-size: 1.2em;
1760 }
1761 .mail-conv-body {
1762     clear: both;
1763 }
1764 .mail-conv-delete-wrapper {
1765     margin-top: 5px;
1766 }
1767
1768
1769 /**
1770  * contacts
1771  */
1772 .view-contact-wrapper,
1773 .contact-entry-wrapper {
1774     float: left;
1775     margin: 0 5px 40px 0;
1776     width: 120px;
1777     height: 120px;
1778     padding: 3px;
1779     position: relative;
1780 }
1781 .contact-direction-wrapper {
1782     position: absolute;
1783     top: 20px;
1784 }
1785 .contact-edit-links {
1786     position: absolute;
1787     top: 60px;
1788 }
1789 .contact-entry-photo-wrapper {
1790
1791 }
1792 .contact-entry-photo {
1793     margin-left: 20px;
1794 }
1795 .contact-entry-name {
1796     width: 120px;
1797     font-weight: bold;
1798     /*overflow: hidden;*/
1799 }
1800 .contact-entry-photo {
1801     position: relative;
1802 }
1803 .contact-entry-edit-links .icon {
1804     border: 1px solid #babdb6;
1805     -webkit-border-radius: 3px;
1806     -moz-border-radius: 3px;
1807     border-radius: 3px;
1808     background-color: #fff;
1809 }
1810 #contact-entry-url, [id^="contact-entry-url"] {
1811     font-size: smaller;
1812     /*overflow: scroll;*/
1813 }
1814 #contact-entry-network, [id^="contact-entry-network"] {
1815     font-size: smaller;
1816     font-style: italic;
1817 }
1818 #contact-edit-banner-name {
1819     font-size: 1.5em;
1820 }
1821 #contact-edit-photo-wrapper {
1822     position: relative;
1823     float: left;
1824     padding: 20px;
1825 }
1826 #contact-edit-direction-icon {
1827     position:absolute;
1828     top:60px;
1829     left:0;
1830 }
1831 #contact-edit-nav-wrapper {
1832     margin-left: 0px;
1833 }
1834 #contact-edit-links {
1835     margin-top: 23px;
1836 }
1837 #contact-edit-links ul {
1838     list-style-type: none;
1839 }
1840 #contact-drop-links {
1841     margin-left:5px;
1842 }
1843 #contact-edit-nav-wrapper .icon {
1844     border: 1px solid #babdb6;
1845     -webkit-border-radius: 3px;
1846     -moz-border-radius: 3px;
1847     border-radius: 3px;
1848 }
1849 #contact-edit-poll-wrapper {
1850     margin-left: 0px;
1851 }
1852 #contact-edit-last-update-text {
1853     margin-bottom: 15px;
1854 }
1855 #contact-edit-last-updated {
1856     font-weight: bold;
1857 }
1858 #contact-edit-poll-text {
1859     display: inline;
1860 }
1861 #contact-edit-info_tbl, #contact-edit-info_parent {
1862     width: 100%;
1863 }
1864 .mceLayout {
1865     width: 100%;
1866 }
1867 #contact-edit-end {
1868     clear: both;
1869     margin-bottom: 65px;
1870 }
1871
1872 .contact-photo-menu-button {
1873     position: absolute;
1874     background-image: url("photo-menu.jpg");
1875     background-position: top left;
1876     background-repeat: no-repeat;
1877     margin: 0px; padding: 0px;
1878     width: 16px;
1879     height: 16px;
1880     top: 64px; left:0px;
1881     overflow: hidden;
1882     text-indent: 40px;
1883     display: none;
1884 }
1885 .contact-photo-menu {
1886     width: auto;
1887     border: 2px solid #444;
1888     background: #2e2f2e;
1889     color: #eec;
1890     position: absolute;
1891     left: 0px; top: 90px;
1892     display: none;
1893     z-index: 10000;
1894 }
1895 .contact-photo-menu ul {
1896     margin:0px;
1897     padding: 0px;
1898     list-style: none;
1899 }
1900 .contact-photo-menu li a {
1901     display: block;
1902     padding: 2px;
1903 }
1904 .contact-photo-menu li a:hover {
1905     color: #fff;
1906     background: #3465A4;
1907     text-decoration: none;
1908 }
1909
1910
1911 /**
1912  * register, settings & profile forms
1913  */
1914 .openid {
1915
1916 }
1917 #id_openid_url {
1918     background:url(login-bg.gif) no-repeat;
1919     background-position:0 50%;
1920     padding-left:18px;
1921 }
1922
1923 #settings-nickname-desc {
1924     background-color: #eec;
1925     -webkit-border-radius: 5px;
1926     -moz-border-radius: 5px;
1927     border-radius: 5px;
1928     padding: 5px;
1929     color: #111;
1930 }
1931 #settings-default-perms {
1932     margin-bottom: 20px;
1933 }
1934 #register-form div,
1935 #profile-edit-form div {
1936     clear: both;
1937 }
1938 .settings-block {
1939
1940 }
1941 .settings-block label {
1942     clear: left;
1943 }
1944 .settings-block input {
1945     margin: 10px 5px;
1946 }
1947 /*#register-form label,     */
1948 /*#profile-edit-form label {*/
1949 /*    width: 300px;         */
1950 /*    float: left;          */
1951 /*}                         */
1952
1953 /*#register-form span,     */
1954 /*#profile-edit-form span {*/
1955 /*    color: #555753;      */
1956 /*    display: block;      */
1957 /*    margin-bottom: 20px; */
1958 /*}                        */
1959 #profile-edit-marital-label span {
1960     margin: -4px;
1961 }
1962 .settings-submit-wrapper,
1963 .profile-edit-submit-wrapper {
1964     margin: 30px 0px;
1965 }
1966 .profile-edit-side-div {
1967     display: none;
1968 }
1969 /*.profile-edit-side-div:hover {
1970     display: block;
1971 }
1972 .profile-edit-side-link {
1973     margin: 3px 0px 0px 70px;
1974 }*/
1975 #profiles-menu-trigger {
1976     margin: 0px 0px 0px 25px;
1977 }
1978 .profile-listing {
1979     float: left;
1980     margin: 20px 20px 0px 0px;
1981 }
1982 .icon-profile-edit {
1983     background: url("icons.png") -150px 0px no-repeat;
1984     border: 0;
1985     cursor: pointer;
1986     display: block;
1987     float: right;
1988     width: 20px;
1989     height: 20px;
1990     margin: 0 0 -18px;
1991     position: absolute;
1992     text-decoration: none;
1993     top: 113px;
1994     right: 260px;
1995 }
1996 #profile-edit-links ul {
1997     margin: 20px 0;
1998     padding: 0;
1999     list-style: none;
2000 }
2001 .marital {
2002     margin-top: 5px;
2003 }
2004 #register-sitename {
2005     display: inline;
2006     font-weight: bold;
2007 }
2008 #advanced-expire-popup {
2009     background: #2e2f2e;
2010     color: #eec;
2011 }
2012 #id_ssl_policy {
2013     width: 374px;
2014 }
2015 #theme-preview {
2016
2017 }
2018 #theme-preview img {
2019     margin: 10px 10px 10px 288px;
2020 }
2021
2022
2023 /**
2024  * contacts selector
2025  */
2026 .group-delete-wrapper {
2027     margin: -31px 50px 0 0;
2028     float: right;
2029 }
2030 /*.group-delete-icon {
2031     margin: 0 0 0 10px;
2032 }*/
2033 #group-edit-submit-wrapper {
2034     margin: 0 0 10px 0;
2035     display: inline;
2036 }
2037 #group-edit-desc {
2038     margin: 10px 0px;
2039 }
2040 #group-members,
2041 #prof-members {
2042     height:200px;
2043     overflow:auto;
2044     border:1px solid #555753;
2045     -webkit-border-radius:5px 5px 0 0;
2046     -moz-border-radius:5px 5px 0 0;
2047     border-radius:5px 5px 0 0;
2048 }
2049 #group-all-contacts,
2050 #prof-all-contacts {
2051     height:200px;
2052     overflow:auto;
2053     border:1px solid #555753;
2054     -webkit-border-radius:0 0 5px 5px;
2055     -moz-border-radius:0 0 5px 5px;
2056     border-radius:0 0 5px 5px;
2057 }
2058 #group-members h3,
2059 #group-all-contacts h3,
2060 #prof-members h3,
2061 #prof-all-contacts h3 {
2062     color:#eeeeec;
2063     background-color:#555753;
2064     margin:0;
2065     padding:5px;
2066 }
2067 #group-separator,
2068 #prof-separator {
2069     display: none;
2070 }
2071
2072
2073 /**
2074  * profile
2075  */
2076 #cropimage-wrapper {
2077     float:left;
2078 }
2079 #crop-image-form {
2080     clear:both;
2081 }
2082
2083
2084 /**
2085  * intros
2086  */
2087 .intro-wrapper {
2088     margin-top: 20px;
2089 }
2090
2091 .intro-fullname {
2092     font-size: 1.1em;
2093     font-weight: bold;
2094
2095 }
2096 .intro-desc {
2097     margin-bottom: 20px;
2098     font-weight: bold;
2099 }
2100
2101 .intro-note {
2102     padding: 10px;
2103 }
2104
2105 .intro-end {
2106     padding: 30px;
2107 }
2108
2109 .intro-form {
2110     float: left;
2111 }
2112 .intro-approve-form {
2113     clear: both;
2114 }
2115 .intro-approve-as-friend-end {
2116     clear: both;
2117 }
2118 .intro-submit-approve, .intro-submit-ignore {
2119     margin-right: 20px;
2120 }
2121 .intro-submit-approve {
2122     margin-top: 15px;
2123 }
2124
2125 .intro-approve-as-friend-label, .intro-approve-as-fan-label {
2126     float: left;
2127 }
2128 .intro-approve-as-friend, .intro-approve-as-fan {
2129     float: left;
2130 }
2131 .intro-form-end {
2132     clear: both;
2133     margin-bottom: 10px;
2134 }
2135 .intro-approve-as-friend-desc {
2136     margin-top: 10px;
2137 }
2138 .intro-approve-as-end {
2139     clear: both;
2140     margin-bottom: 10px;
2141 }
2142
2143 .intro-end {
2144     clear: both;
2145 }
2146
2147
2148 /**
2149  * events
2150  */
2151 .clear { clear: both; }
2152 .eventcal {
2153     float:left;
2154     font-size:20px;
2155 }
2156 .event {
2157     background: #2e2f2e;
2158 }
2159 .vevent {
2160     border:1px solid #ccc;
2161 }
2162 .vevent .event-description, .vevent .event-location {
2163     margin-left: 10px;
2164     margin-right: 10px;
2165 }
2166 .vevent .event-start {
2167     margin-left: 10px;
2168     margin-right: 10px;
2169 }
2170 #new-event-link {
2171     margin-bottom: 10px;
2172 }
2173 .edit-event-link, .plink-event-link {
2174     /*float: left;      */
2175     /*margin-top: 4px;  */
2176     /*margin-right: 4px;*/
2177     /*margin-bottom: 15px;*/
2178 }
2179 .event-description:before {
2180     content: url('../../../images/calendar.png');
2181     margin-right: 15px;
2182 }
2183 .event-start, .event-end {
2184     margin-left: 10px;
2185     width: 330px;
2186     font-size: smaller;
2187 }
2188 .event-start .dtstart, .event-end .dtend {
2189     float: right;
2190 }
2191 .event-list-date {
2192     margin-bottom: 10px;
2193 }
2194 .prevcal, .nextcal {
2195     float: left;
2196     margin-left: 32px;
2197     margin-right: 32px;
2198     margin-top: 64px;
2199 }
2200 .event-calendar-end {
2201     clear: both;
2202 }
2203 .calendar {
2204     font-family: monospace;
2205 }
2206 .today {
2207     font-weight: bold;
2208     color: #FF0000;
2209 }
2210 #event-start-text,
2211 #event-finish-text {
2212     margin-top: 10px;
2213     margin-bottom: 5px;
2214 }
2215 #event-nofinish-checkbox,
2216 #event-nofinish-text,
2217 #event-adjust-checkbox,
2218 #event-adjust-text,
2219 #event-share-checkbox {
2220     float:left;
2221 }
2222 #event-datetime-break {
2223     margin-bottom: 10px;
2224 }
2225 #event-nofinish-break,
2226 #event-adjust-break,
2227 #event-share-break {
2228     clear: both;
2229 }
2230 #event-desc-text,
2231 #event-location-text {
2232     margin-top: 10px;
2233     margin-bottom: 5px;
2234 }
2235 #event-submit {
2236     margin-top: 10px;
2237 }
2238 .body-tag {
2239     margin: 10px 0;
2240     opacity: 0.5;
2241     filter:alpha(opacity=50);
2242 }
2243 .body-tag:hover {
2244     opacity: 1.0 !important;
2245     filter:alpha(opacity=100) !important;
2246 }
2247 .filesavetags, .categorytags {
2248     margin: 20px 0;
2249     opacity: 0.5;
2250     filter:alpha(opacity=50);
2251 }
2252 .filesavetags:hover, .categorytags:hover {
2253     margin: 20px 0;
2254     opacity: 1.0 !important;
2255     filter:alpha(opacity=100) !important;
2256 }
2257 .item-select {
2258     opacity: 0.1;
2259     filter:alpha(opacity=10);
2260     float: right;
2261     margin-right: 5px;
2262 }
2263 .item-select:hover, .checkeditem {
2264     opacity: 1;
2265     filter:alpha(opacity=100);
2266 }
2267 #item-delete-selected {
2268     margin-top: 30px;
2269 }
2270 /* was tired of having no way of moving it around, so
2271 * here's a little 'hook' to do so */
2272 .delete-checked {
2273     position: absolute;
2274     left: 35px;
2275     margin-top: 20px;
2276 }
2277 #item-delete-selected-end {
2278     clear: both;
2279 }
2280 #item-delete-selected-icon, #item-delete-selected-desc {
2281     float: left;
2282     margin-right: 5px;
2283 }
2284 #item-delete-selected-desc:hover {
2285     text-decoration: underline;
2286 }
2287 .fc-state-highlight {
2288     background: #eec;
2289     color: #2e2f2e;
2290 }
2291
2292
2293 /**
2294  * directory
2295  */
2296 .directory-item {
2297     float: left;
2298     /*margin: 50px 50px 0px 0px;*/
2299     margin: 0 5px 4px 0;
2300     padding: 3px;
2301     width: 180px;
2302     height: 250px;
2303     position: relative;
2304 }
2305
2306
2307 /**
2308  * sidebar
2309  */
2310 #group-sidebar {
2311     margin-bottom: 10px;
2312 }
2313 .group-selected, .nets-selected, .fileas-selected {
2314     padding: 3px;
2315     color: #2e2f2e;
2316     background: #88a9d2;
2317     font-weight: bold;
2318 }
2319 .group-selected:hover, .nets-selected:hover, .fileas-selected:hover {
2320     color: #2e2f2e;
2321 }
2322 .groupsideedit {
2323     margin-right: 10px;
2324 }
2325 #sidebar-group-ul {
2326     padding-left: 0;
2327 }
2328 #sidebar-group-list {
2329     margin: 0 0 5px 0;
2330 }
2331 #sidebar-group-list ul {
2332     list-style-type: none;
2333     list-style-position: inside;
2334 }
2335 #sidebar-group-list li {
2336     margin-top: 10px;
2337 }
2338 #sidebar-group-list .icon {
2339     display: inline-block;
2340     height: 12px;
2341     width: 12px;
2342 }
2343 #sidebar-new-group {
2344     margin: auto;
2345     display: inline-block;
2346     color: #efefef;
2347     text-decoration: none;
2348     text-align: center;
2349 }
2350 #peoplefind-sidebar form {
2351     margin-bottom: 10px;
2352 }
2353 #sidebar-new-group:hover {
2354     /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
2355     /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
2356     /*background-color: #b20202;*/
2357 }
2358
2359 #sidebar-new-group:active {
2360     position: relative;
2361     top: 1px;
2362 }
2363 #side-peoplefind-url {
2364     background-color: #2e2f2e;
2365     color: #eec;
2366     border: 1px 999 solid;
2367     margin-right: 3px;
2368     width: 75%;
2369 }
2370 #side-peoplefind-url:hover, #side-peoplefind-url:focus {
2371     background-color: #efefef;
2372     color: #222;
2373     border: 1px 333 solid;
2374 }
2375 .nets-ul {
2376     list-style-type: none;
2377     padding-left: 0px;
2378 }
2379 .nets-ul li {
2380     margin: 10px 0 0;
2381 }
2382
2383 .nets-link {
2384     margin-left: 0px;
2385 }
2386 .nets-all {
2387     margin-left: 0px;
2388 }
2389 #netsearch-box {
2390     margin-top: 20px;
2391     width: 150px;
2392 }
2393 #netsearch-box #search-submit {
2394     margin: 5px 0px 0px 0px;
2395 }
2396
2397
2398 /**
2399  * admin
2400  */
2401 #pending-update {
2402     float:right;
2403     color: #fff;
2404     font-weight: bold;
2405     background-color: #ff0000;
2406     padding: 0 .3em;
2407 }
2408 .admin.linklist {
2409     border: 0; padding: 0;
2410 }
2411 .admin.link {
2412     list-style-position: inside;
2413 }
2414 #adminpage {
2415     color: #eec;
2416     background: #2e2f2e;
2417     margin: 5px;
2418     padding: 10px;
2419 }
2420 #adminpage dl {
2421     clear:left;
2422     margin-bottom: 2px;
2423     padding-bottom: 2px;
2424     border-bottom: 1px solid #000;
2425 }
2426 #adminpage dt {
2427     width: 250px;
2428     float: left;
2429     font-weight: bold;
2430 }
2431 #adminpage dd {
2432     margin-left: 250px;
2433 }
2434 #adminpage h3 {
2435     border-bottom:1px solid #ccc;
2436 }
2437
2438 #adminpage .submit {
2439     clear:left;
2440 }
2441 #adminpage #pluginslist {
2442     margin: 0;
2443     padding: 0;
2444 }
2445 #adminpage .plugin {
2446     list-style: none;
2447     display: block;
2448     border: 1px solid #888;
2449     padding: 1em;
2450     margin-bottom: 5px;
2451     clear: left;
2452 }
2453 #adminpage .toggleplugin {
2454     float:left;
2455     margin-right: 1em;
2456 }
2457 #adminpage table {
2458     width: 100%;
2459     border-bottom: 1px solid #000;
2460     margin: 5px 0;
2461 }
2462 #adminpage table th {
2463     text-align: left;
2464 }
2465 #adminpage td .icon {
2466     float: left;
2467 }
2468 #adminpage table#users img {
2469     width: 16px; height: 16px;
2470 }
2471 #adminpage table tr:hover {
2472     color: #2e2f2e;
2473     background-color: #eec;
2474 }
2475 #adminpage .selectall {
2476     text-align: right;
2477 }
2478 #adminpage #users a {
2479     color: #eec;
2480     text-decoration: underline;
2481 }
2482 #users .name {
2483     color: #eec;
2484 }
2485
2486
2487 /**
2488  * form fields
2489  */
2490 .field {
2491     /*margin-bottom: 10px;*/
2492     /*padding-bottom: 10px;*/
2493     overflow: auto;
2494     width: 100%;
2495 }
2496 .field label, label {
2497     width: 38%;
2498     display: inline-block;
2499     font-size: 1.077em;
2500     margin: 0 10px 1em 0;
2501     border: 1px #2e2f2e solid;
2502     padding: 5px;
2503     background: #eec;
2504     color: #111;
2505 }
2506 input,
2507 input[type="text"],
2508 input[type="password"],
2509 input[type="search"] {
2510     width: 250px;
2511     height: 25px;
2512     border: 1px #999 solid;
2513 }
2514 input[type="checkbox"], input[type="radio"] {
2515     border: 1px #999 solid;
2516     margin: 0 0 0 0;
2517 }
2518 input[type="submit"], input[type="button"] {
2519     background-color: #eee;
2520     border: 2px outset #aaa;
2521     border-radius: 5px;
2522     box-shadow: 1px 3px 4px 0 #111;
2523     color: #2e302e;
2524     cursor: pointer;
2525     font-weight: bold;
2526     width: auto;
2527     text-shadow: 1px 1px #000;
2528     -webkit-border-radius: 5px;
2529     -moz-border-radius: 5px;
2530 }
2531 input[type="submit"]:active, input[type="button"]:active {
2532     box-shadow: 0 0 0 0;
2533 }
2534 .field textarea {
2535     width: 80%;
2536     height: 100px;
2537 }
2538 .field_help {
2539     display: block;
2540     margin-left: 297px;
2541     color: #aaa;
2542 }
2543 .field .onoff {
2544     float: left;
2545     width: 80px;
2546 }
2547 .field .onoff a {
2548     display: block;
2549     border: 1px solid #666;
2550     padding: 3px 6px 4px 10px;
2551     height: 16px;
2552     text-decoration: none;
2553 }
2554 .field .onoff .on {
2555     background: url("../../../images/onoff.jpg") no-repeat 42px 1px #999;
2556     color: #111;
2557     text-align: left;
2558 }
2559 .field .onoff .off {
2560     background: url("../../../images/onoff.jpg") no-repeat 2px 1px #ccc;
2561     color: #333;
2562     text-align: right;
2563 }
2564 .hidden {
2565     display:none !important;
2566 }
2567 .field.radio .field_help {
2568     margin-left: 297px;
2569 }
2570
2571
2572 /*
2573  * update
2574  */
2575 .popup {
2576     width: 100%;
2577     height: 100%;
2578     top: 0px;
2579     left: 0px;
2580     position: absolute;
2581     display: none;
2582 }
2583 .popup .background {
2584     background-color: rgba(0,0,0,128);
2585     opacity: 0.5;
2586     width: 100%;
2587     height: 100%;
2588     position: absolute;
2589     top:0px;
2590     left:0px;
2591 }
2592 .popup .panel {
2593     top: 25%;
2594     left: 25%;
2595     width: 50%;
2596     height: 50%;
2597     padding: 1em;
2598     position: absolute;
2599     border: 4px solid #000000;
2600     background-color: #FFFFFF;
2601 }
2602 #panel {
2603     z-index: 100;
2604 }
2605 .grey {
2606     color: grey;
2607 }
2608 .orange {
2609     color: orange;
2610 }
2611 .red {
2612     color: red;
2613 }
2614 .popup .panel .panel_text {
2615     display: block;
2616     overflow: auto;
2617     height: 80%;
2618 }
2619 .popup .panel .panel_in {
2620     width: 100%;
2621     height: 100%;
2622     position: relative;
2623 }
2624 .popup .panel .panel_actions {
2625     width: 100%;
2626     bottom: 4px;
2627     left: 0px;
2628     position: absolute;
2629 }
2630 .panel_text .progress {
2631     width: 50%;
2632     overflow: hidden;
2633     height: auto;
2634     border: 1px solid #cccccc;
2635     margin-bottom: 5px;
2636 }
2637 .panel_text .progress span {
2638     float: right;
2639     display: block;
2640     width: 25%;
2641     background-color: #eeeeee;
2642     text-align: right;
2643 }
2644
2645 /**
2646  * OAuth
2647  */
2648 .oauthapp {
2649     height: auto;
2650     overflow: auto;
2651     border-bottom: 2px solid #cccccc;
2652     padding-bottom: 1em;
2653     margin-bottom: 1em;
2654 }
2655 .oauthapp img {
2656     float: left;
2657     width: 48px; height: 48px;
2658     margin: 10px;
2659 }
2660 .oauthapp img.noicon {
2661     background-image: url("../../../images/icons/48/plugin.png");
2662     background-position: center center;
2663     background-repeat: no-repeat;
2664 }
2665 .oauthapp a {
2666     float: left;
2667 }
2668
2669
2670 /**
2671  * icons
2672  */
2673 .iconspacer {
2674     display: block;
2675     width: 16px;
2676     height: 16px;
2677 }
2678 .icon {
2679     display: block;
2680     width: 20px;
2681     height: 20px;
2682     background: url(icons.png) no-repeat;
2683     border: 0;
2684     text-decoration: none;
2685     border-radius: 5px;
2686 }
2687 .icon:hover {
2688     border: 0;
2689     text-decoration: none;
2690 }
2691 .icon.drop,
2692 .icon.drophide, .icon.delete {
2693     float: left;
2694     margin: 0 2px;
2695 }
2696 .icon.s22.delete {
2697     display: block;
2698     background-position: -110px 0;
2699 }
2700 .icon.s22.text {
2701     padding: 10px 0px 0px 25px;
2702     width: 200px;
2703 }
2704 .icon.text {
2705     text-indent: 0px;
2706 }
2707 .icon.s16 {
2708     min-width: 16px;
2709     height: 16px;
2710 }
2711 .s16 .add {
2712     background: url("../../../images/icons/16/add.png") no-repeat;
2713 }
2714 .add {
2715     margin: 0px 5px;
2716 }
2717 .article {
2718     background-position: -50px 0;
2719 }
2720 .audio {
2721     background-position: -70px 0;
2722 }
2723 .block {
2724     background-position: -90px 0px;
2725 }
2726 .drop, .delete {
2727     background-position: -110px 0;
2728 }
2729 .drophide {
2730     background-position: -130px 0;
2731 }
2732 .edit {
2733     background-position: -150px 0;
2734 }
2735 .camera {
2736     background-position: -170px 0;
2737 }
2738 .dislike {
2739     background-position: -190px 0;
2740 }
2741 .file-as {
2742     background-position: -230px -60px;
2743 }
2744 .like {
2745     background-position: -211px 0;
2746 }
2747 .link {
2748     background-position: -230px 0;
2749 }
2750 .globe, .location {
2751     background-position: -50px -20px;
2752 }
2753 .noglobe, .nolocation {
2754     background-position: -70px -20px;
2755 }
2756 .no {
2757     background-position: -90px -20px;
2758 }
2759 .pause {
2760     background-position: -110px -20px;
2761 }
2762 .play {
2763     background-position: -130px -20px;
2764 }
2765 .pencil {
2766     background-position: -151px -18px;
2767 }
2768 .small-pencil {
2769     background-position: -170px -20px;
2770 }
2771 .recycle {
2772     background-position: -190px -20px;
2773 }
2774 .remote-link {
2775     background-position: -210px -20px;
2776 }
2777 .share {
2778     background-position: -230px -20px;
2779 }
2780 .tools {
2781     background-position: -50px -40px;
2782 }
2783 .lock {
2784     background-position: -70px -40px;
2785 }
2786 .unlock {
2787     background-position: -88px -40px;
2788 }
2789 .video {
2790     background-position: -110px -40px;
2791 }
2792 .attach {
2793     background-position: -190px -40px;
2794 }
2795 .language {
2796     background-position: -210px -40px;
2797 }
2798 .starred {
2799     background-position: -130px -60px;
2800 }
2801 .unstarred {
2802     background-position: -150px -60px;
2803 }
2804 .tagged {
2805     background-position: -170px -60px;
2806 }
2807 .on {
2808     background-position: -50px  -60px;
2809 }
2810 .off {
2811     background-position: -70px  -60px;
2812 }
2813 .prev {
2814     background-position: -90px  -60px;
2815 }
2816 .next {
2817     background-position: -110px  -60px;
2818 }
2819 .icon.dim {
2820     opacity: 0.3;
2821     filter: alpha(opacity=30);
2822 }
2823 #pause {
2824     position: fixed;
2825     bottom: 40px;
2826     right: 30px;
2827 }
2828 .border, .border:hover {
2829     border: 1px solid #babdb6;
2830     -webkit-border-radius: 5px;
2831     -moz-border-radius: 5px;
2832     border-radius: 5px;
2833 }
2834 .attachtype {
2835     display: block;
2836     width: 20px;
2837     height: 23px;
2838     background-image: url(../../../images/content-types.png);
2839 }
2840 .type-video {
2841     background-position: 0px 0px;
2842 }
2843 .type-image {
2844     background-position: -20px 0;
2845 }
2846 .type-audio {
2847     background-position: -40px 0;
2848 }
2849 .type-text {
2850     background-position: -60px 0px;
2851 }
2852 .type-unkn {
2853     background-position: -80px 0;
2854 }
2855
2856
2857 /**
2858  * footer
2859  */
2860 .cc-license {
2861     margin-top: 100px;
2862     font-size: 0.7em;
2863 }
2864 footer {
2865     display: block;
2866     /*margin: 50px 20%;*/
2867     clear: both;
2868 }
2869 #profile-jot-text {
2870     height: 20px;
2871     color: #eec;
2872     border: 1px solid #eec;
2873     border-radius: 5px;
2874     width: 99.5%;
2875 }
2876
2877
2878 /**
2879  * acl
2880  */
2881 #photo-edit-perms-select,
2882 #photos-upload-permissions-wrapper,
2883 #profile-jot-acl-wrapper {
2884     display: block !important;
2885     background: #2e2f2e;
2886     color: #eec;
2887 }
2888 #acl-wrapper {
2889     width: 660px;
2890     margin: 0 auto;
2891 }
2892 #acl-search {
2893     float: right;
2894     background: #fff url("../../../images/search_18.png") no-repeat right center;
2895     padding-right: 20px;
2896     margin: 6px;
2897     color: #111;
2898 }
2899 #acl-showall {
2900     float: left;
2901     display: block;
2902     width: auto;
2903     height: 18px;
2904     background: #eec url("../../../images/show_all_off.png") 8px 8px no-repeat;
2905     padding: 7px 10px 7px 30px;
2906     -webkit-border-radius: 5px;
2907     -moz-border-radius: 5px;
2908     border-radius: 5px;
2909     color: #999;
2910     margin: 5px 0;
2911 }
2912 #acl-showall.selected {
2913     color: #000;
2914     background: #f90 url(../../../images/show_all_on.png) 8px 8px no-repeat;
2915 }
2916 #acl-list {
2917     height: 210px;
2918     border: 1px solid #ccc;
2919     clear: both;
2920     margin-top: 30px;
2921     overflow: auto;
2922 }
2923 /*#acl-list-content {
2924 }*/
2925 .acl-list-item {
2926     border: 1px solid #eec;
2927     display: block;
2928     float: left;
2929     height: 110px;
2930     margin: 3px 0 5px 5px;
2931     width: 120px;
2932 }
2933 .acl-list-item img {
2934     width: 22px;
2935     height: 22px;
2936     float: left;
2937     margin: 5px 5px 20px;
2938 }
2939 .acl-list-item p {
2940     height: 12px;
2941     font-size: 10px;
2942     margin: 0 0 22px;
2943     padding: 2px 0 1px;
2944 }
2945 .acl-list-item a {
2946     background: #eec 3px 3px no-repeat;
2947     -webkit-border-radius: 2px;
2948     -moz-border-radius: 2px;
2949     border-radius: 2px;
2950     clear: both;
2951     font-size: 10px;
2952     display: block;
2953     width: 55px;
2954     height: 20px;
2955     color: #2e2f2e;
2956     margin: 5px auto 0;
2957     padding: 0 3px;
2958     text-align: center;
2959     vertical-align: middle;
2960 }
2961 #acl-wrapper a:hover {
2962     text-decoration: none;
2963     color: #2e2f2e;
2964     border: 0;
2965 }
2966 .acl-button-show {
2967     background-image: url('../../../images/show_off.png');
2968     margin: 0 auto;
2969 }
2970 .acl-button-hide {
2971     background-image: url('../../../images/hide_off.png');
2972     margin: 0 auto;
2973 }
2974 .acl-button-show.selected {
2975     color: #2e2f2e;
2976     background-color: #9ade00;
2977     background-image: url(../../../images/show_on.png);
2978 }
2979 .acl-button-hide.selected {
2980     color: #2e2f2e;
2981     background-color: #ff4141;
2982     background-image: url(../../../images/hide_on.png);
2983 }
2984 .acl-list-item.groupshow {
2985     border-color: #9ade00;
2986 }
2987 .acl-list-item.grouphide {
2988     border-color: #ff4141;
2989 }
2990 /** /acl **/
2991
2992
2993 /* autocomplete popup */
2994 .acpopup {
2995     max-height: 175px;
2996     max-width: 42%;
2997     background-color: #555753;
2998     color: #fff;
2999     overflow: auto;
3000     z-index: 100000;
3001     border: 1px solid #cccccc;
3002 }
3003 .acpopupitem {
3004     background-color: #555753;
3005     padding: 4px;
3006     clear: left;
3007 }
3008 .acpopupitem img {
3009     float: left;
3010     margin-right: 4px;
3011 }
3012 .acpopupitem.selected {
3013     color: #2e302e;
3014     background-color: #eeeeec;
3015 }
3016 .qcomment-wrapper {
3017     padding: 0px;
3018     margin: 5px 5px 5px 81%;
3019 }
3020 .qcomment {
3021     opacity: 0.5;
3022     filter:alpha(opacity=50);
3023 }
3024 .qcomment:hover {
3025     opacity: 1.0;
3026     filter:alpha(opacity=100);
3027 }
3028 #network-star-link {
3029     margin-top: 10px;
3030 }
3031 .network-star {
3032     float: left;
3033     margin-right: 5px;
3034 }
3035 .network-star.icon.starred {
3036     display: inline-block;
3037 }
3038 #fileas-sidebar {
3039
3040 }
3041 .fileas-ul {
3042     padding: 0;
3043 }
3044
3045
3046
3047 /*
3048  * addons theming
3049  */
3050
3051 #sidebar-page-list {
3052
3053 }
3054 #sidebar-page-list ul {
3055     padding: 0;
3056     margin: 5px 0;
3057 }
3058 #sidebar-page-list li {
3059     list-style: none;
3060 }
3061 #jappix_mini {
3062     margin-left: 130px;
3063     position: fixed;
3064     bottom: 0;
3065     right: 175px !important; /* override the jappix css */
3066     z-index: 999;
3067 }
3068
3069 @media handheld {
3070     body {
3071         font-size: 15pt;
3072     }
3073 }