view/theme/dispy/style.css

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