view/theme/dispy/style.css

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