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