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