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