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         margin-top: 60px;
 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: 230px;
 617     font-size: smaller;
 618 }
 619 .vcard .fn {
 620         font-size: 1.7em;
 621         font-weight: bold;
 622         border-bottom: 1px solid #729fcf;
 623         padding-bottom: 3px;
 624 }
 625 .vcard #profile-photo-wrapper {
 626         margin: 20px;
 627 }
 628 .vcard #profile-photo-wrapper img {
 629         box-shadow: 3px 3px 10px 0;
 630 }
 631 aside h4 {
 632         font-size: 1.2em;
 633 }
 634 aside #viewcontacts {
 635         text-align: right;
 636 }
 637 .aprofile dt {
 638     box-shadow: 1px 1px 5px 0;
 639     color: #666666;
 640     margin: 15px 0 5px;
 641     padding-left: 5px;
 642 }
 643 #profile-extra-links ul {
 644         margin-left: 0px;
 645     padding-left: 0px;
 646     list-style: none;
 647 }
 648 #dfrn-request-link {
 649         background:#3465A4 url(connect.png) no-repeat 95% center;
 650         border-radius:5px 5px 5px 5px;
 651         color:#fff;
 652         display:block;
 653         font-size:1.2em;
 654         padding:.2em .5em;
 655 }
 656 #netsearch-box {
 657         margin: 30px 0px;
 658 }
 659
 660
 661 /**
 662 * contacts block
 663 */
 664 .contact-block-div {
 665     width: 50px;
 666     height: 50px;
 667     float: left;
 668 }
 669 .contact-block-textdiv {
 670     width: 150px;
 671     height: 34px;
 672     float: left;
 673 }
 674 #contact-block-end {
 675     clear: both;
 676 }
 677
 678
 679 /**
 680  * jot
 681  **/
 682 #jot {
 683   /*width: 785px;*/
 684   margin: 10px 0 20px 0px;
 685   width: 100%;
 686 }
 687 #jot #jot-tools {
 688   margin: 0px;
 689   padding: 0px;
 690   height: 40px;
 691   overflow: none;
 692   width: 100%;
 693   /*background-color: #0e232e;*/
 694   /*border-bottom: 2px solid #9eabb0;*/
 695 }
 696 #jot #jot-tools span {
 697     float: left;
 698     margin: 10px 20px 2px 0px;
 699 }
 700 #jot #jot-tools span a {
 701     display: block;
 702     /*color: #cccccc;    */
 703     /*width: 100%;       */
 704     /*height: 40px;      */
 705     /*text-align: center;*/
 706     /*line-height: 40px; */
 707     /*overflow: hidden;*/
 708 }
 709 /*#jot #jot-tools li:hover {*/
 710     /*background-color: #364e59;*/
 711 /*}*/
 712 #jot #jot-tools .perms {
 713     float: right;
 714     width: 40px;
 715 }
 716 /*#jot #jot-tools .perms a.unlock {*/
 717 /*    width: 30px;                    */
 718 /*    border-left: 10px solid #cccccc;*/
 719 /*    background-color: #cccccc;      */
 720 /*}*/
 721 /*#jot #jot-tools .perms a.lock {*/
 722 /*    width: 30px;                    */
 723 /*    border-left: 10px solid #666666;*/
 724 /*    background-color: #666666;      */
 725 /*}*/
 726 /*#jot #jot-tools li.submit {            */
 727 /*    float: right;                      */
 728 /*    background-color: #cccccc;         */
 729 /*    border-bottom: 2px solid #cccccc;  */
 730 /*    border-right: 1px solid #666666;   */
 731 /*    border-left: 1px solid #666666;    */
 732 /*}                                      */
 733 /*#jot #jot-tools li.submit input {      */
 734 /*    border: 0px;                       */
 735 /*    margin: 0px;                       */
 736 /*    padding: 0px;                      */
 737 /*    background-color: #cccccc;         */
 738 /*    color: #666666;                    */
 739 /*    width: 80px;                       */
 740 /*    height: 40px;                      */
 741 /*    line-height: 40px;                 */
 742 /*}                                      */
 743 /*#jot #jot-tools li.submit input:hover {*/
 744 /*    background-color: #bdcdd4;         */
 745 /*    color: #666666;                    */
 746 /*}                                      */
 747 #jot #jot-tools li.loading {
 748     float: right;
 749     background-color: #ffffff;
 750     width: 20px;
 751     vertical-align: center;
 752     text-align: center;
 753     border-top: 2px solid #9eabb0;
 754     height: 38px;
 755 }
 756 #jot #jot-tools li.loading img {
 757     margin-top: 10px;
 758 }
 759 #jot #jot-title {
 760     border: 0px;
 761     margin: 0 0 5px;
 762     height: 20px;
 763     width: 90%;
 764     font-weight: bold;
 765     border-radius: 5px;
 766         vertical-align: middle;
 767         padding: 5px 1px;
 768 }
 769 #jot #jot-title:hover,
 770 #jot #jot-title:focus {
 771   border: 1px solid #999;
 772   border-radius: 5px;
 773 }
 774 #jot #character-counter {
 775   width: 40px;
 776   float: right;
 777   text-align: right;
 778   height: 20px;
 779   line-height: 20px;
 780   padding: 5px;
 781   margin: 0 0 5px;
 782 }
 783 #profile-jot-text_tbl {
 784         margin-bottom: 10px;
 785 }
 786 #profile-jot-text_ifr {
 787         width:99.900002% !important;
 788 }
 789 #profile-attach-wrapper,
 790 #profile-audio,
 791 #profile-link-wrapper,
 792 #profile-location,
 793 #profile-nolocation,
 794 #profile-title-wrapper,
 795 #profile-upload-wrapper,
 796 #profile-video {
 797     float: left;
 798     margin-left: 10px;
 799 }
 800 #profile-rotator-wrapper {
 801         float: right;
 802 }
 803 #profile-jot-tools-end,
 804 #profile-jot-banner-end {
 805         clear: both;
 806 }
 807 #profile-jot-email-wrapper {
 808         margin:10px 10% 0;
 809         border:1px solid #555753;
 810         border-bottom:0;
 811 }
 812 #profile-jot-email-label {
 813         background-color:#555753;
 814         color:#ccccce;
 815         padding:5px;
 816 }
 817 #profile-jot-email {
 818         width:90%;
 819         margin:5px;
 820 }
 821 #profile-jot-networks {
 822         margin: 0 10%;
 823         border: 1px solid #555753;
 824         border-top: 0;
 825         border-bottom: 0;
 826         padding: 5px;
 827 }
 828 #jot-preview-link {
 829     margin: 0 0 0 25px;
 830     border: 0;
 831     text-decoration: none;
 832 }
 833 .icon-text-preview {
 834         margin: 0 0 -18px 0;
 835         display: block;
 836     width: 20px;
 837     height: 20px;
 838     background: url(icons.png) no-repeat -128px -40px;
 839     border: 0;
 840     text-decoration: none;
 841 }
 842 #profile-jot-perms {
 843         /*float: right;*/
 844     background-color: #555753;
 845     height: 22px;
 846     width: 20px;
 847     -webkit-border-radius: 5px 0px 0px 5px;
 848     -moz-border-radius: 5px 0px 0px 5px;
 849     border-radius: 5px 0px 0px 5px;
 850     overflow: hidden;
 851     border: 0px;
 852     margin: 0 -4px 0 10px;
 853 }
 854 #profile-jot-submit-wrapper {
 855         float: right;
 856         width: 30%;
 857         list-style: none;
 858         margin: 10px 0 0 0;
 859         padding: 0;
 860 }
 861 #profile-jot-submit-wrapper li {
 862         display: inline-block;
 863         vertical-align: middle;
 864 }
 865 #profile-jot-submit {
 866         height: 22px;
 867         background-color: #555753;
 868         color: #eeeeec;
 869         -webkit-border-radius: 0 5px 5px 0;
 870         -moz-border-radius: 0 5px 5px 0;
 871         border-radius: 0 5px 5px 0;
 872         border: 0;
 873         margin: 0;
 874 }
 875 #jot-perms-icons {
 876         background-color: #555753;
 877         height: 22px;
 878         width: 20px;
 879         -webkit-border-radius: 0 5px 5px 0;
 880         -moz-border-radius: 0 5px 5px 0;
 881         border-radius: 0 5px 5px 0;
 882         overflow: hidden;
 883         border: 0;
 884         margin: 0 0 0 94.4%;
 885 }
 886 #profile-jot-acl-wrapper {
 887         margin: 0 10px;
 888         border: 1px solid #555753;
 889         border-top: 0;
 890         display: block !important;
 891 }
 892 #group_allow_wrapper,
 893 #group_deny_wrapper,
 894 #acl-permit-outer-wrapper {
 895         width:47%;
 896         float:left;
 897 }
 898 #contact_allow_wrapper,
 899 #contact_deny_wrapper,
 900 #acl-deny-outer-wrapper {
 901         width:47%;
 902         float:right;
 903 }
 904 #acl-permit-text {
 905         background-color: #555753;
 906         color: #ccccce;
 907         padding: 5px;
 908         float: left;
 909 }
 910 #jot-public {
 911         background-color: #555753;
 912         color: #ff0000;
 913         padding: 5px;
 914         float: left;
 915 }
 916 #acl-deny-text {
 917         background-color: #555753;
 918         color: #ccccce;
 919         padding: 5px;
 920         float: left;
 921 }
 922 #acl-permit-text-end,
 923 #acl-deny-text-end {
 924         clear: both;
 925 }
 926 #jot-title-desc {
 927         color: #cccccc;
 928 }
 929 #profile-jot-desc {
 930         color: #a00;
 931 }
 932 #jot-title-wrapper {
 933         margin-bottom: 5px;
 934 }
 935 #jot-title {
 936         border: 1px solid #cccccc;
 937         width: 90%;
 938 }
 939 #jot-title-display {
 940         font-weight: bold;
 941 }
 942 .jothidden {
 943     display: none;
 944 }
 945 #jot-preview-content {
 946     background-color: #ffffe0;
 947     border: 1px #aaaa00 solid;
 948     border-radius: 3px;
 949     padding: 3px 3px 6px 10px;
 950 }
 951
 952
 953 /**
 954  * section
 955  */
 956 section {
 957     margin: 20px 6% 0 4%;
 958     font-size: 0.8em;
 959     padding-right: 220px;
 960         min-width: 475px;
 961 }
 962
 963 /** tabs **/
 964 .tabs {
 965     list-style: none;
 966     margin: 10px 0 10px;
 967     padding: 0;
 968     border-bottom: 1px solid #729fcf;
 969     font-size: 14px;
 970 }
 971 .tabs li {
 972     display: inline;
 973 }
 974 .tab {
 975     padding: 0 5px;
 976 }
 977 .tab:hover {
 978     background-color: #729fcf;
 979     color: #eeeeec;
 980     border: 0px;
 981 }
 982 .tab:active {
 983     background-color: #729fcf;
 984     color: #eeeeec;
 985     border: 0px;
 986 }
 987
 988
 989 /**
 990  *      items
 991  */
 992 .wall-item-outside-wrapper {
 993         border: 1px solid #aaa;
 994         border-radius: 5px;
 995 }
 996 .wall-item-outside-wrapper.comment {
 997         margin-top: 5px;
 998 }
 999 .wall-item-outside-wrapper-end {
1000     clear: both;
1001 }
1002 .wall-item-content-wrapper {
1003     position: relative;
1004         padding: 10px;
1005         width: auto;
1006 }
1007 .wall-item-outside-wrapper .wall-item-comment-wrapper {
1008     /*margin-left: 90px;*/
1009 }
1010 .shiny {
1011     background: #efefdf;
1012 }
1013 .wall-item-content {
1014         overflow-x: auto;
1015 }
1016 [id^="tread-wrapper"], [class^="tread-wrapper"] {
1017     margin: 15px 0 0 0;
1018         /*border: 1px #aaa solid;*/
1019         /*border-radius: 5px;*/
1020     padding: 0px;
1021         overflow-x: auto;
1022 }
1023 .wall-item-photo-menu {
1024     display: none;
1025 }
1026 .wall-item-photo-menu-button {
1027     display:none;
1028     text-indent:-99999px;
1029     background:#555753 url(menu-user-pin.jpg) no-repeat 75px center;
1030     position:absolute;
1031     overflow:hidden;
1032     height:20px;
1033     width:90px;
1034     top:85px;
1035     left:0;
1036     -webkit-border-radius:0 0 5px 5px;
1037     -moz-border-radius:0 0 5px 5px;
1038     border-radius:0 0 5px 5px;
1039 }
1040 .wall-item-info {
1041     float: left;
1042     width: 110px;
1043 }
1044 .wall-item-photo-wrapper {
1045     width: 80px;
1046     height: 80px;
1047     position: relative;
1048     padding: 5px;
1049     background-color: #555753;
1050     -webkit-border-radius: 5px;
1051     -moz-border-radius: 5px;
1052     border-radius: 5px;
1053 }
1054 [class^="wall-item-tools"] > *, [class^="wall-item-tools"] > * > * {
1055         margin: 0 0 5px 0;
1056 }
1057 .wall-item-tools {
1058     float: right;
1059     filter: alpha(opacity=35);
1060     opacity: 0.4;
1061     -webkit-transition: all 1s ease-in-out;
1062     -moz-transition: all 1s ease-in-out;
1063     -o-transition: all 1s ease-in-out;
1064     -ms-transition: all 1s ease-in-out;
1065     transition: all 1s ease-in-out;
1066 }
1067 .wall-item-tools:hover {
1068     filter: alpha(opacity=100);
1069     opacity: 1;
1070     -webkit-transition: all 1s ease-in-out;
1071     -moz-transition: all 1s ease-in-out;
1072     -o-transition: all 1s ease-in-out;
1073     -ms-transition: all 1s ease-in-out;
1074     transition: all 1s ease-in-out;
1075 }
1076 .wall-item-title {
1077         font-size: 1.2em;
1078         font-weight: bold;
1079     margin-bottom: 1em;
1080 }
1081 .wall-item-body {
1082         margin: 10px 10px 10px 0px;
1083     text-align: left;
1084 }
1085 .wall-item-lock-wrapper {
1086         float: right;
1087 }
1088 .wall-item-dislike,
1089 .wall-item-like {
1090         clear: left;
1091         font-size: 0.8em;
1092         color: #878883;
1093         margin: 5px 0 5px 120px;
1094 }
1095 .wall-item-author, .wall-item-actions-author {
1096         clear: left;
1097         font-size: 0.8em;
1098         color: #878883;
1099         margin: 20px 0 0 110px;
1100 }
1101 .wall-item-ago {
1102         display: inline;
1103         padding-left: 10px;
1104 }
1105 .wall-item-wrapper-end {
1106         clear:both;
1107 }
1108 .wall-item-location {
1109     margin-top: 10px;
1110     width: 100px;
1111     overflow: hidden;
1112     text-overflow: ellipsis;
1113     -o-text-overflow: ellipsis;
1114 }
1115 .wall-item-location .icon {
1116     float: left;
1117 }
1118 .wall-item-location > a {
1119     margin-left: 25px;
1120     font-size: 0.7em;
1121     display: block;
1122 }
1123 .wall-item-location .smalltext {
1124     margin-left: 25px;
1125     font-size: 0.7em;
1126     display: block;
1127 }
1128 .wall-item-location > br {
1129     display: none;
1130 }
1131 .wallwall .wwto {
1132     left: 5px;
1133     margin: 0;
1134     position: absolute;
1135     top: 75px;
1136     width: 30px;
1137     z-index: 10001;
1138     width: 30px;
1139     height: 30px;
1140 }
1141 .wallwall .wwto img {
1142     width: 30px !important;
1143     height: 30px !important;
1144 }
1145 .wallwall .wall-item-photo-end {
1146     clear: both;
1147 }
1148 .wall-item-arrowphoto-wrapper {
1149     position: absolute;
1150     left: 35px;
1151     top: 80px;
1152     z-index: 10002;
1153 }
1154 .wall-item-photo-menu {
1155         min-width: 92px;
1156         border: 2px solid #FFFFFF;
1157         border-top: 0px;
1158         background: #555753;
1159         position: absolute;
1160         left: -2px; top: 101px;
1161         display: none;
1162         z-index: 10000;
1163         -webkit-border-radius: 0px 5px 5px 5px;
1164         -moz-border-radius: 0px 5px 5px 5px;
1165         border-radius: 0px 5px 5px 5px;
1166 }
1167 .wall-item-photo-menu ul {
1168     margin:0px;
1169     padding: 0px;
1170     list-style: none;
1171 }
1172 .wall-item-photo-menu li a {
1173     white-space: nowrap;
1174     display: block;
1175     padding: 5px 2px;
1176     color: #eeeeec;
1177 }
1178 .wall-item-photo-menu li a:hover {
1179     color: #555753;
1180     background: #eeeeec;
1181 }
1182 #item-delete-selected {
1183     overflow: auto;
1184     width: 100%;
1185 }
1186
1187
1188 /**
1189  *      comment
1190  */
1191 .ccollapse-wrapper {
1192     font-size: 0.9em;
1193     margin-left: 80px;
1194 }
1195
1196 .wall-item-outside-wrapper.comment {
1197     margin-left: 80px;
1198 }
1199 .wall-item-outside-wrapper.comment .wall-item-photo {
1200     width: 40px!important;
1201     height: 40px!important;
1202 }
1203 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {
1204     width: 40px;
1205     height: 40px;
1206 }
1207 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
1208         width: 50px;
1209     top: 45px;
1210     background-position: 35px center;
1211 }
1212 .wall-item-outside-wrapper.comment .wall-item-info {
1213     width: 60px;
1214 }
1215 .wall-item-outside-wrapper.comment .wall-item-body {
1216     margin-left: 10px;
1217 }
1218 .wall-item-outside-wrapper.comment .wall-item-author {
1219     margin-left: 50px;
1220 }
1221
1222 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
1223     min-width: 50px;
1224     top: 60px;
1225 }
1226 .comment-wwedit-wrapper {
1227     /*margin: 30px 0px 0px 80px;*/
1228 }
1229 .comment-edit-wrapper {
1230     border-top: 1px #aaa solid;
1231 }
1232 .comment-wwedit-wrapper img,
1233 .comment-edit-wrapper img {
1234         width: 20px;
1235         height: 20px;
1236 }
1237 .comment-edit-photo-link, .comment-edit-photo {
1238         float: left;
1239         margin-left: 10px;
1240 }
1241 .my-comment-photo {
1242     width: 40px;
1243     height: 40px;
1244     padding: 5px;
1245 }
1246 [class^="comment-edit-text"] {
1247     margin: 5px 0 10px 20px;
1248     width: 86.5%;
1249 }
1250 .comment-edit-text-empty {
1251         height: 20px;
1252         border: 2px #babdd6 solid;
1253         border-radius: 5px;
1254         color: #babdb6;
1255         -webkit-transition: all 0.5s ease-in-out;
1256         -moz-transition: all 0.5s ease-in-out;
1257         -o-transition: all 0.5s ease-in-out;
1258         -ms-transition: all 0.5s ease-in-out;
1259         transition: all 0.5s ease-in-out;
1260 }
1261 .comment-edit-text-empty:hover {
1262         color: #999999;
1263 }
1264 .comment-edit-text-full {
1265         height: 10em;
1266     border-radius: 5px;
1267         -webkit-transition: all 0.5s ease-in-out;
1268         -moz-transition: all 0.5s ease-in-out;
1269         -o-transition: all 0.5s ease-in-out;
1270         -ms-transition: all 0.5s ease-in-out;
1271         transition: all 0.5s ease-in-out;
1272 }
1273 .comment-edit-submit-wrapper {
1274         width: 90%;
1275         margin: 5px 5px 10px 50px;
1276         text-align: right;
1277 }
1278 .comment-edit-submit {
1279     height: 22px;
1280     background-color: #555753;
1281     color: #eeeeec;
1282     -webkit-border-radius: 5px;
1283     -moz-border-radius: 5px;
1284     border-radius: 5px;
1285     border: 0;
1286 }
1287
1288
1289 /**
1290  * item text style
1291  **/
1292 .wall-item-body code {
1293         display: block;
1294         padding-left: 10px;
1295         border-color: #ccc;
1296         border-style: solid;
1297         border-width: 1px 1px 1px 10px;
1298         background: #eee;
1299         width: 95%;
1300 }
1301
1302
1303 /**
1304  * profile
1305  **/
1306 div[id$="text"] {
1307     font-weight: bold;
1308     border-bottom: 1px solid #ccc;
1309 }
1310 div[id$="wrapper"] {
1311     height: 100%;
1312     margin-bottom: 1em;
1313 }
1314 div[id$="wrapper"] br {
1315     clear: left;
1316 }
1317 #advanced-profile-with {
1318     margin-left: 200px;
1319 }
1320
1321
1322 /**
1323  * photos
1324  **/
1325 .photos {
1326         height: auto;
1327         overflow: auto;
1328 }
1329 #photo-top-links {
1330     margin-bottom: 30px;
1331 }
1332 .photo-album-image-wrapper,
1333 .photo-top-image-wrapper {
1334     float: left;
1335     -moz-box-shadow: 0 0 5px #888;
1336     -webkit-box-shadow: 0 0 5px #888;
1337     box-shadow: 0 0 5px #888;
1338     background-color: #eee;
1339     -webkit-border-radius: 5px;
1340     -moz-border-radius: 5px;
1341     border-radius: 5px;
1342     padding-bottom: 30px;
1343     position: relative;
1344     margin: 0 10px 10px 0;
1345 }
1346
1347 #photo-photo {
1348     max-width: 100%;
1349 }
1350 #photo-photo img {
1351     max-width: 100%;
1352 }
1353 .photo-top-image-wrapper a:hover,
1354 #photo-photo a:hover,
1355 .photo-album-image-wrapper a:hover {
1356     border-bottom: 0;
1357 }
1358 .photo-top-photo,.photo-album-photo {
1359     -webkit-border-radius:5px 5px 0 0;
1360     -moz-border-radius:5px 5px 0 0;
1361     border-radius:5px 5px 0 0;
1362 }
1363 .photo-top-album-name {
1364     position: absolute;
1365     bottom: 0;
1366     padding: 0 5px;
1367 }
1368 .caption {
1369     position: absolute;
1370     bottom: 0;
1371     margin: 0 5px;
1372 }
1373 #photo-photo {
1374         position: relative;
1375         float:left;
1376 }
1377 #photo-photo-end {
1378     clear: both;
1379 }
1380 #photo-prev-link,
1381 #photo-next-link {
1382     position:absolute;
1383     width:30%;
1384     height:100%;
1385     background-color:rgba(255,255,255,0.5);
1386     opacity:0;
1387     -webkit-transition:all .2s ease-in-out;
1388     -moz-transition:all .2s ease-in-out;
1389     -o-transition:all .2s ease-in-out;
1390     -ms-transition:all .2s ease-in-out;
1391     transition:all .2s ease-in-out;
1392     background-position:center center;
1393     background-repeat:no-repeat;
1394 }
1395 #photo-prev-link {
1396     left:0;
1397     top:0;
1398     background-image:url(prev.png);
1399 }
1400 #photo-next-link {
1401     right:0;
1402     top:0;
1403     background-image:url(next.png);
1404 }
1405
1406 #photo-prev-link a,#photo-next-link a {
1407     display:block;
1408     width:100%;
1409     height:100%;
1410     overflow:hidden;
1411     text-indent:-900000px;
1412 }
1413 #photo-prev-link:hover,
1414 #photo-next-link:hover {
1415     opacity:1;
1416     -webkit-transition:all .2s ease-in-out;
1417     -moz-transition:all .2s ease-in-out;
1418     -o-transition:all .2s ease-in-out;
1419     -ms-transition:all .2s ease-in-out;
1420     transition:all .2s ease-in-out;
1421 }
1422 #photo-next-link .icon,
1423 #photo-prev-link .icon {
1424     display: none;
1425 }
1426 #photos-upload-spacer,
1427 #photos-upload-new-wrapper,
1428 #photos-upload-exist-wrapper {
1429     margin-bottom: 1em;
1430 }
1431 #photos-upload-existing-album-text,
1432 #photos-upload-newalbum-div {
1433     background-color:#555753;
1434     color:#eeeeec;
1435     padding:1px;
1436 }
1437 #photos-upload-album-select,
1438 #photos-upload-newalbum {
1439     width: 99%;
1440 }
1441 #photos-upload-perms-menu {
1442     text-align: right;
1443 }
1444 #photo-edit-caption, #photo-edit-newtag, #photo-edit-albumname {
1445     float: left;
1446     margin-bottom: 25px;
1447 }
1448 #photo-edit-link-wrap {
1449     margin-bottom: 15px;
1450 }
1451 #photo-edit-caption {
1452         width: 100%;
1453 }
1454 #photo-edit-newtag {
1455         width: 100%;
1456 }
1457 #photo-like-div {
1458     margin-bottom: 25px;
1459 }
1460 #photo-edit-caption-end, #photo-edit-tags-end, #photo-edit-albumname-end {
1461     clear: both;
1462 }
1463 #photo-edit-delete-button {
1464     margin-left: 200px;
1465 }
1466 #photo-edit-end {
1467     margin-bottom: 35px;
1468 }
1469 #photo-caption {
1470     font-size: 110%;
1471     font-weight: bold;
1472     margin-top: 15px;
1473     margin-bottom: 15px;
1474 }
1475
1476 /**
1477  *      message
1478  */
1479 .prvmail-text {
1480     width: 100%;
1481 }
1482 #prvmail-subject {
1483     width: 100%;
1484 }
1485 #prvmail-submit-wrapper {
1486     margin-top: 10px;
1487 }
1488 #prvmail-submit {
1489     float:right;
1490     margin-top: 0;
1491 }
1492 #prvmail-submit-wrapper > div {
1493     margin-right:5px;
1494     float:left;
1495 }
1496 .mail-list-outside-wrapper {
1497     margin-top: 20px;
1498 }
1499 .mail-list-sender {
1500     float: left;
1501 }
1502 .mail-list-detail {
1503     margin-left: 90px;
1504 }
1505 .mail-list-sender-name {
1506     display: inline;
1507 }
1508 .mail-list-date {
1509     display: inline;
1510     font-size: 0.8em;
1511     padding-left: 10px;
1512 }
1513 .mail-list-subject {
1514     font-size: 1.5em;
1515 }
1516 .mail-list-delete-wrapper {
1517     float: right;
1518 }
1519 .mail-list-outside-wrapper-end {
1520     clear: both;
1521 }
1522 .mail-conv-sender {
1523     float: left;
1524     margin: 0px 5px 5px 0px;
1525 }
1526 .mail-conv-sender-photo {
1527     width: 32px;
1528     height: 32px;
1529 }
1530 .mail-conv-sender-name {
1531     float: left;
1532 }
1533 .mail-conv-date {
1534     float: right;
1535 }
1536 .mail-conv-subject {
1537     clear: right;
1538     font-weight: bold;
1539     font-size: 1.2em;
1540 }
1541 .mail-conv-body {
1542     clear: both;
1543 }
1544 .mail-conv-delete-wrapper {
1545     margin-top: 5px;
1546 }
1547
1548
1549 /**
1550  *      contacts
1551  */
1552 .view-contact-wrapper,
1553 .contact-entry-wrapper {
1554     float: left;
1555     margin-right: 5px;
1556     margin-bottom: 40px;
1557     width: 120px;
1558         height: 120px;
1559         padding: 3px;
1560     position: relative;
1561 }
1562 .contact-direction-wrapper {
1563     position: absolute;
1564     top: 20px;
1565 }
1566 .contact-edit-links {
1567     position: absolute;
1568     top: 60px;
1569 }
1570 .contact-entry-photo-wrapper {
1571
1572 }
1573 .contact-entry-photo {
1574         margin-left: 20px;
1575 }
1576 .contact-entry-name {
1577     width: 120px;
1578     font-weight: bold;
1579     /*overflow: hidden;*/
1580 }
1581 .contact-entry-photo {
1582         position: relative;
1583 }
1584 .contact-entry-edit-links .icon {
1585     border: 1px solid #babdb6;
1586     -webkit-border-radius: 3px;
1587     -moz-border-radius: 3px;
1588     border-radius: 3px;
1589     background-color: #fff;
1590 }
1591 #contact-entry-url, [id^="contact-entry-url"] {
1592     font-size: smaller;
1593     /*overflow: scroll;*/
1594 }
1595 #contact-entry-network, [id^="contact-entry-network"] {
1596     font-size: smaller;
1597     font-style: italic;
1598 }
1599 #contact-edit-banner-name {
1600     font-size: 1.5em;
1601 }
1602 #contact-edit-photo-wrapper {
1603     position: relative;
1604     float: left;
1605     padding: 20px;
1606 }
1607 #contact-edit-direction-icon {
1608     position:absolute;
1609     top:60px;
1610     left:0;
1611 }
1612 #contact-edit-nav-wrapper {
1613     margin-left: 0px;
1614 }
1615 #contact-edit-links {
1616     margin-top: 23px;
1617 }
1618 #contact-edit-links ul {
1619     list-style-type: none;
1620 }
1621 #contact-drop-links {
1622     margin-left:5px;
1623 }
1624 #contact-edit-nav-wrapper .icon {
1625         border: 1px solid #babdb6;
1626     -webkit-border-radius: 3px;
1627     -moz-border-radius: 3px;
1628     border-radius: 3px;
1629 }
1630 #contact-edit-poll-wrapper {
1631     margin-left: 0px;
1632 }
1633 #contact-edit-last-update-text {
1634     margin-bottom: 15px;
1635 }
1636 #contact-edit-last-updated {
1637     font-weight: bold;
1638 }
1639 #contact-edit-poll-text {
1640     display: inline;
1641 }
1642 #contact-edit-info_tbl, #contact-edit-info_parent {
1643     width: 100%;
1644 }
1645 .mceLayout {
1646     width: 100%;
1647 }
1648 #contact-edit-end {
1649     clear: both;
1650     margin-bottom: 65px;
1651 }
1652
1653 .contact-photo-menu-button {
1654     position: absolute;
1655     background-image: url("photo-menu.jpg");
1656     background-position: top left;
1657     background-repeat: no-repeat;
1658     margin: 0px; padding: 0px;
1659     width: 16px;
1660     height: 16px;
1661     top: 64px; left:0px;
1662     overflow: hidden;
1663     text-indent: 40px;
1664     display: none;
1665 }
1666 .contact-photo-menu {
1667     width: auto;
1668     border: 2px solid #444444;
1669     background: #FFFFFF;
1670     position: absolute;
1671     left: 0px; top: 90px;
1672     display: none;
1673     z-index: 10000;
1674 }
1675 .contact-photo-menu ul {
1676     margin:0px;
1677     padding: 0px;
1678     list-style: none;
1679 }
1680 .contact-photo-menu li a {
1681     display: block;
1682     padding: 2px;
1683 }
1684 .contact-photo-menu li a:hover {
1685     color: #fff;
1686     background: #3465A4;
1687     text-decoration: none;
1688 }
1689
1690
1691
1692 /**
1693  *      register, settings & profile forms
1694  */
1695 #id_openid_url,
1696 .openid {
1697     background:url(login-bg.gif) no-repeat;
1698     background-position:0 50%;
1699     padding-left:18px;
1700 }
1701
1702 #settings-nickname-desc {
1703     background-color: #eee;
1704     -webkit-border-radius: 5px;
1705     -moz-border-radius: 5px;
1706     border-radius: 5px;
1707     padding: 5px;
1708 }
1709 #settings-default-perms {
1710     margin-bottom: 20px;
1711 }
1712 #register-form div,
1713 #profile-edit-form div {
1714     clear: both;
1715 }
1716
1717 #register-form label,
1718 #profile-edit-form label {
1719         width: 300px;
1720     float: left;
1721 }
1722
1723 #register-form span,
1724 #profile-edit-form span {
1725     color:#555753;
1726     display:block;
1727     margin-bottom:20px;
1728 }
1729 .settings-submit-wrapper,
1730 .profile-edit-submit-wrapper {
1731     margin: 30px 0px;
1732 }
1733 .profile-edit-side-div {
1734     margin-top: 0px;
1735 }
1736 .profile-edit-side-link {
1737     float: right;
1738     margin: 0px 20px -18px 0;
1739 }
1740 .profile-listing {
1741     float: left;
1742     margin: 20px 20px 0px 0px;
1743 }
1744
1745 #profile-edit-links ul {
1746     margin: 20px 0;
1747     padding: 0;
1748     list-style: none;
1749 }
1750
1751 #register-sitename {
1752     display: inline;
1753     font-weight: bold;
1754 }
1755
1756 /**
1757  *      contacts selector
1758  */
1759 .group-delete-wrapper {
1760         margin: -28px 150px 0 0;
1761     float: right;
1762 }
1763 #group-edit-submit-wrapper {
1764     margin: 0 0 10px 0;
1765     display: inline;
1766 }
1767 #group-edit-desc {
1768     margin: 10px 0px;
1769 }
1770 #group-members,
1771 #prof-members {
1772     height:200px;
1773     overflow:auto;
1774     border:1px solid #555753;
1775     -webkit-border-radius:5px 5px 0 0;
1776     -moz-border-radius:5px 5px 0 0;
1777     border-radius:5px 5px 0 0;
1778 }
1779 #group-all-contacts,
1780 #prof-all-contacts {
1781     height:200px;
1782     overflow:auto;
1783     border:1px solid #555753;
1784     -webkit-border-radius:0 0 5px 5px;
1785     -moz-border-radius:0 0 5px 5px;
1786     border-radius:0 0 5px 5px;
1787 }
1788 #group-members h3,
1789 #group-all-contacts h3,
1790 #prof-members h3,
1791 #prof-all-contacts h3 {
1792     color:#eeeeec;
1793     background-color:#555753;
1794     margin:0;
1795     padding:5px;
1796 }
1797 #group-separator,
1798 #prof-separator {
1799     display: none;
1800 }
1801
1802 /**
1803  * profile
1804  */
1805 #cropimage-wrapper {
1806     float:left;
1807 }
1808 #crop-image-form {
1809     clear:both;
1810 }
1811
1812 /**
1813  * events
1814  **/
1815 .clear { clear: both; }
1816 .eventcal {
1817     float:left;
1818     font-size:20px;
1819 }
1820 .vevent {
1821     border:1px solid #ccc;
1822 }
1823 .vevent .event-description, .vevent .event-location {
1824         margin-left: 10px;
1825         margin-right: 10px;
1826 }
1827 .vevent .event-start {
1828         margin-left: 10px;
1829         margin-right: 10px;
1830 }
1831
1832 #new-event-link {
1833         margin-bottom: 10px;
1834 }
1835 .edit-event-link, .plink-event-link {
1836         float: left;
1837         margin-top: 4px;
1838         margin-right: 4px;
1839         margin-bottom: 15px;
1840 }
1841 .event-description:before {
1842         content: url('../../../images/calendar.png');
1843         margin-right: 15px;
1844 }
1845 .event-start, .event-end {
1846         margin-left: 10px;
1847         width: 330px;
1848 }
1849 .event-start .dtstart, .event-end .dtend {
1850         float: right;
1851 }
1852 .event-list-date {
1853         margin-bottom: 10px;
1854 }
1855 .prevcal, .nextcal {
1856         float: left;
1857         margin-left: 32px;
1858         margin-right: 32px;
1859         margin-top: 64px;
1860 }
1861 .event-calendar-end {
1862         clear: both;
1863 }
1864 .calendar {
1865     font-family: monospace;
1866 }
1867 .today {
1868         font-weight: bold;
1869         color: #FF0000;
1870 }
1871 #event-start-text,
1872 #event-finish-text {
1873         margin-top: 10px;
1874         margin-bottom: 5px;
1875 }
1876 #event-nofinish-checkbox,
1877 #event-nofinish-text,
1878 #event-adjust-checkbox,
1879 #event-adjust-text,
1880 #event-share-checkbox {
1881     float:left;
1882 }
1883 #event-datetime-break {
1884         margin-bottom: 10px;
1885 }
1886 #event-nofinish-break,
1887 #event-adjust-break,
1888 #event-share-break {
1889         clear: both;
1890 }
1891 #event-desc-text,
1892 #event-location-text {
1893         margin-top: 10px;
1894         margin-bottom: 5px;
1895 }
1896 #event-submit {
1897         margin-top: 10px;
1898 }
1899 .body-tag {
1900         margin: 10px 0;
1901         opacity: 0.5;
1902         filter:alpha(opacity=50);
1903 }
1904 .body-tag:hover {
1905         opacity: 1.0 !important;
1906         filter:alpha(opacity=100) !important;
1907 }
1908 .item-select {
1909         opacity: 0.1;
1910         filter:alpha(opacity=10);
1911         float: right;
1912         margin-right: 10px;
1913
1914 }
1915 .item-select:hover, .checkeditem {
1916         opacity: 1;
1917         filter:alpha(opacity=100);
1918 }
1919 #item-delete-selected {
1920         margin-top: 30px;
1921 }
1922 /* was tired of having no way of moving it around, so
1923  * here's a little 'hook' to do so */
1924 .delete-checked {
1925         position: absolute;
1926         left: 35px;
1927         margin-top: 20px;
1928 }
1929 #item-delete-selected-end {
1930         clear: both;
1931 }
1932 #item-delete-selected-icon, #item-delete-selected-desc {
1933         float: left;
1934         margin-right: 5px;
1935 }
1936 #item-delete-selected-desc:hover {
1937         text-decoration: underline;
1938 }
1939
1940
1941 /**
1942  *      directory
1943  */
1944 .directory-item {
1945     float: left;
1946     margin: 50px 50px 0px 0px;
1947 }
1948
1949
1950 /**
1951  * sidebar
1952  */
1953 #group-sidebar {
1954     margin-bottom: 10px;
1955 }
1956 .group-selected, .nets-selected {
1957     padding: 3px;
1958     border: 1px solid #CCCCCC;
1959     background: #F8F8F8;
1960     font-weight: bold;
1961 }
1962 .groupsideedit {
1963     margin-right: 10px;
1964 }
1965 #sidebar-group-ul {
1966     padding-left: 0;
1967 }
1968 #sidebar-group-list {
1969     margin: 0 0 5px 0;
1970 }
1971 #sidebar-group-list ul {
1972     list-style-type: none;
1973     list-style-position: inside;
1974 }
1975 #sidebar-group-list li {
1976     margin-top: 10px;
1977 }
1978 #sidebar-group-list .icon {
1979     display: inline-block;
1980     height: 12px;
1981     width: 12px;
1982 }
1983 #sidebar-new-group {
1984     margin: auto;
1985     display: inline-block;
1986     color: #efefef;
1987     text-decoration: none;
1988     text-align: center;
1989 }
1990
1991 #sidebar-new-group:hover {
1992     /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
1993     /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
1994     /*background-color: #b20202;*/
1995 }
1996
1997 #sidebar-new-group:active {
1998     position: relative;
1999     top: 1px;
2000 }
2001 .nets-ul {
2002     list-style-type: none;
2003     padding-left: 0px;
2004 }
2005 .nets-ul li {
2006     margin: 10px 0 0;
2007 }
2008
2009 .nets-link {
2010     margin-left: 0px;
2011 }
2012 .nets-all {
2013     margin-left: 0px;
2014 }
2015 #netsearch-box {
2016     margin-top: 20px;
2017     width: 150px;
2018 }
2019 #netsearch-box #search-submit {
2020     margin: 5px 0px 0px 0px;
2021 }
2022
2023 /**
2024  * ADMIN
2025  */
2026 #pending-update {
2027     float:right;
2028     color: #fff;
2029     font-weight: bold;
2030     background-color: #ff0000;
2031     padding: 0 .3em;
2032 }
2033 .admin.linklist {
2034     border: 0; padding: 0;
2035 }
2036 .admin.link {
2037     list-style-position: inside;
2038 }
2039 #adminpage dl {
2040     clear:left;
2041     margin-bottom: 2px;
2042     padding-bottom: 2px;
2043     border-bottom: 1px solid #000;
2044 }
2045 #adminpage dt {
2046     width: 200px;
2047     float: left;
2048     font-weight: bold;
2049 }
2050 #adminpage dd {
2051         margin-left: 200px;
2052 }
2053 #adminpage h3 {
2054     border-bottom:1px solid #ccc;
2055 }
2056
2057 #adminpage .submit {
2058         clear:left;
2059 }
2060
2061 #adminpage #pluginslist {
2062     margin: 0;
2063     padding: 0;
2064 }
2065 #adminpage .plugin {
2066     list-style: none;
2067     display: block;
2068     border: 1px solid #888;
2069     padding: 1em;
2070     margin-bottom: 5px;
2071     clear: left;
2072 }
2073 #adminpage .toggleplugin {
2074         float:left;
2075         margin-right: 1em;
2076 }
2077
2078 #adminpage table {
2079     width: 100%;
2080     border-bottom: 1px solid #000;
2081     margin: 5px 0;
2082 }
2083 #adminpage table th {
2084     text-align: left;
2085 }
2086 #adminpage td .icon {
2087     float: left;
2088 }
2089 #adminpage table#users img {
2090     width: 16px; height: 16px;
2091 }
2092 #adminpage table tr:hover {
2093     background-color:#bbc7d7;
2094 }
2095 #adminpage .selectall {
2096     text-align: right;
2097 }
2098
2099 /**
2100  * Form fields
2101  */
2102 .field {
2103         /*margin-bottom: 10px;*/
2104         /*padding-bottom: 10px;*/
2105     overflow: auto;
2106     width: 100%;
2107 }
2108 .field label {
2109     float: left;
2110     width: 275px;
2111         display: block;
2112         font-size: 1.077em;
2113         /*font-weight: bold;*/
2114         margin: 0 10px 0.5em 0;
2115         border: 1px #999 solid;
2116         padding: 5px;
2117         background: #eee;
2118         vertical-align: middle;
2119 }
2120 .field input {
2121         width: 250px;
2122         height: 25px;
2123         border: 1px #999 solid;
2124 }
2125 .field textarea {
2126     width: 80%;
2127 }
2128 .field textarea {
2129     height: 100px;
2130 }
2131 .field_help {
2132     display: block;
2133     margin-left: 297px;
2134     color: #666;
2135 }
2136 .field .onoff {
2137     float: left;
2138     width: 80px;
2139 }
2140 .field .onoff a {
2141     display: block;
2142     border: 1px solid #666;
2143     padding: 3px 6px 4px 10px;
2144     height: 16px;
2145     text-decoration: none;
2146 }
2147 .field .onoff .on {
2148         background: url("../../../images/onoff.jpg") no-repeat 42px 1px #999;
2149     color: #111;
2150     text-align: left;
2151 }
2152 .field .onoff .off {
2153         background: url("../../../images/onoff.jpg") no-repeat 2px 1px #ccc;
2154     color: #333;
2155     text-align: right;
2156 }
2157 .hidden {
2158     display:none !important;
2159 }
2160
2161 .field.radio .field_help {
2162     margin-left: 0;
2163 }
2164
2165
2166 /*
2167  * UPDATE
2168  */
2169 .popup {
2170         width: 100%;
2171     height: 100%;
2172         top:0px;
2173     left:0px;
2174         position: absolute;
2175         display: none;
2176 }
2177 .popup .background {
2178         background-color: rgba(0,0,0,128);
2179         opacity: 0.5;
2180         width: 100%;
2181     height: 100%;
2182         position: absolute;
2183         top:0px;
2184     left:0px;
2185 }
2186 .popup .panel {
2187         top: 25%;
2188     left: 25%;
2189     width: 50%;
2190     height: 50%;
2191         padding: 1em;
2192         position: absolute;
2193         border: 4px solid #000000;
2194         background-color: #FFFFFF;
2195 }
2196 #panel {
2197     z-index: 100;
2198 }
2199 .grey {
2200     color: grey;
2201 }
2202 .orange {
2203     color: orange;
2204 }
2205 .red {
2206     color: red;
2207 }
2208 .popup .panel .panel_text {
2209     display: block;
2210     overflow: auto;
2211     height: 80%;
2212 }
2213 .popup .panel .panel_in {
2214     width: 100%;
2215     height: 100%;
2216     position: relative;
2217 }
2218 .popup .panel .panel_actions {
2219     width: 100%;
2220     bottom: 4px;
2221     left: 0px;
2222     position: absolute;
2223 }
2224 .panel_text .progress {
2225     width: 50%;
2226     overflow: hidden;
2227     height: auto;
2228     border: 1px solid #cccccc;
2229     margin-bottom: 5px;
2230 }
2231 .panel_text .progress span {
2232     float: right;
2233     display: block;
2234     width: 25%;
2235     background-color: #eeeeee;
2236     text-align: right;
2237 }
2238
2239 /**
2240  * OAuth
2241  */
2242 .oauthapp {
2243         height: auto;
2244     overflow: auto;
2245         border-bottom: 2px solid #cccccc;
2246         padding-bottom: 1em;
2247         margin-bottom: 1em;
2248 }
2249 .oauthapp img {
2250         float: left;
2251         width: 48px; height: 48px;
2252         margin: 10px;
2253 }
2254 .oauthapp img.noicon {
2255         background-image: url("../../../images/icons/48/plugin.png");
2256         background-position: center center;
2257         background-repeat: no-repeat;
2258 }
2259 .oauthapp a {
2260         float: left;
2261 }
2262
2263
2264 /**
2265  * ICONS
2266  */
2267 .iconspacer {
2268         display: block;
2269     width: 16px;
2270     height: 16px;
2271 }
2272 .icon {
2273     display: block;
2274     width: 20px;
2275     height: 20px;
2276     background: url(icons.png) no-repeat;
2277     border: 0;
2278     text-decoration: none;
2279 }
2280 .icon:hover {
2281     border: 0;
2282     text-decoration: none;
2283 }
2284 .icon.drop,
2285 .icon.drophide, .icon.delete {
2286     float: left;
2287 }
2288 .icon.s22 {
2289         display: block;
2290         background: url(icons.png) no-repeat;
2291         width: 22px;
2292         height: 22px;
2293 }
2294 .icon.s22.delete {
2295         display: block;
2296         background-position: -110px 0;
2297 }
2298 .icon.s22.text {
2299         padding: 10px 0px 0px 25px;
2300         width: 200px;
2301 }
2302 .icon.text {
2303     text-indent: 0px;
2304 }
2305 .icon.s16 {
2306     min-width: 16px;
2307     height: 16px;
2308 }
2309 .s16 .add {
2310     background: url("../../../images/icons/16/add.png") no-repeat;
2311 }
2312 .add {
2313     margin: 0px 5px;
2314 }
2315 .article {
2316         background-position: -50px 0;
2317 }
2318 .audio {
2319         background-position: -70px 0;
2320 }
2321 .block {
2322         background-position: -90px 0px;
2323 }
2324 .drop, .delete {
2325         background-position: -110px 0;
2326 }
2327 .drophide {
2328         background-position: -130px 0;
2329 }
2330 .edit {
2331         background-position: -150px 0;
2332 }
2333 .camera {
2334         background-position: -170px 0;
2335 }
2336 .dislike {
2337         background-position: -190px 0;
2338 }
2339 .like {
2340         background-position: -211px 0;
2341 }
2342 .link {
2343         background-position: -230px 0;
2344 }
2345 .globe, .location {
2346         background-position: -50px -20px;
2347 }
2348 .noglobe, .nolocation {
2349         background-position: -70px -20px;
2350 }
2351 .no {
2352         background-position: -90px -20px;
2353 }
2354 .pause {
2355         background-position: -110px -20px;
2356 }
2357 .play {
2358         background-position: -130px -20px;
2359 }
2360 .pencil {
2361         background-position: -151px -18px;
2362 }
2363 .small-pencil {
2364         background-position: -170px -20px;
2365 }
2366 .recycle {
2367         background-position: -190px -20px;
2368 }
2369 .remote-link {
2370         background-position: -210px -20px;
2371 }
2372 .share {
2373         background-position: -230px -20px;
2374 }
2375 .tools {
2376         background-position: -50px -40px;
2377 }
2378 .lock {
2379         background-position: -70px -40px;
2380 }
2381 .unlock {
2382         background-position: -90px -40px;
2383 }
2384 .video {
2385         background-position: -110px -40px;
2386 }
2387 .attach {
2388         background-position: -190px -40px;
2389 }
2390 .language {
2391         background-position: -210px -40px;
2392 }
2393 .starred {
2394         background-position: -130px -60px;
2395 }
2396 .unstarred {
2397         background-position: -150px -60px;
2398 }
2399 .tagged {
2400         background-position: -170px -60px;
2401 }
2402 .on {
2403         background-position: -50px  -60px;
2404 }
2405 .off {
2406         background-position: -70px  -60px;
2407 }
2408 .prev {
2409         background-position: -90px  -60px;
2410 }
2411 .next {
2412         background-position: -110px  -60px;
2413 }
2414 .icon.dim {
2415         opacity: 0.3;
2416         filter: alpha(opacity=30);
2417 }
2418 #pause {
2419         position: fixed;
2420         bottom: 5px;
2421         right: 5px;
2422 }
2423 .border, .border:hover {
2424         border: 1px solid #babdb6;
2425     -webkit-border-radius: 3px;
2426     -moz-border-radius: 3px;
2427     border-radius: 3px;
2428 }
2429 .attachtype {
2430     display: block;
2431     width: 20px;
2432     height: 23px;
2433     background-image: url(../../../images/content-types.png);
2434 }
2435 .type-video {
2436     background-position: 0px 0px;
2437 }
2438 .type-image {
2439     background-position: -20px 0;
2440 }
2441 .type-audio {
2442     background-position: -40px 0;
2443 }
2444 .type-text {
2445     background-position: -60px 0px;
2446 }
2447 .type-unkn {
2448     background-position: -80px 0;
2449 }
2450
2451
2452 /**
2453  *      footer
2454  */
2455 .cc-license {
2456     margin-top: 100px;
2457     font-size: 0.7em;
2458 }
2459 footer {
2460     display: block;
2461     margin: 50px 20%;
2462     clear: both;
2463 }
2464 #profile-jot-text {
2465     height: 20px;
2466     color: #666;
2467     border: 1px solid #ccc;
2468     border-radius: 5px;
2469     width: 99.5%;
2470 }
2471
2472
2473 /** acl **/
2474 #photo-edit-perms-select,
2475 #photos-upload-permissions-wrapper,
2476 #profile-jot-acl-wrapper {
2477     display: block !important;
2478 }
2479 #acl-wrapper {
2480     width: 690px;
2481     float: left;
2482 }
2483 #acl-search {
2484     float: right;
2485     background: #fff url("../../../images/search_18.png") no-repeat right center;
2486     padding-right: 20px;
2487 }
2488 #acl-showall {
2489     float:left;
2490     display:block;
2491     width:auto;
2492     height:18px;
2493     background-color:#CCC;
2494     background-image:url("../../../images/show_all_off.png");
2495     background-position:7px 7px;
2496     background-repeat:no-repeat;
2497     padding:7px 10px 7px 30px;
2498     -webkit-border-radius:5px;
2499     -moz-border-radius:5px;
2500     border-radius:5px;
2501     color:#999;
2502 }
2503 #acl-showall.selected {
2504     color:#000;
2505     background-color:#F90;
2506     background-image:url(../../../images/show_all_on.png);
2507 }
2508 #acl-list {
2509     height:210px;
2510     border:1px solid #ccc;
2511     clear:both;
2512     margin-top:30px;
2513     overflow:auto;
2514 }
2515 #acl-list-content {
2516 }
2517 .acl-list-item {
2518     display:block;
2519     width:150px;
2520     height:30px;
2521     border:1px solid #ccc;
2522     margin:5px;
2523     float:left;
2524 }
2525 .acl-list-item img {
2526     width:22px;
2527     height:22px;
2528     float:left;
2529     margin:4px;
2530 }
2531 .acl-list-item p {
2532     height: 12px;
2533     font-size: 10px;
2534     margin: 0;
2535     padding: 2px 0 1px;
2536 }
2537 .acl-list-item a {
2538     font-size:8px;
2539     display:block;
2540     width:40px;
2541     height:10px;
2542     float:left;
2543     color:#999;
2544     background-color:#CCC;
2545     background-position:3px 3px;
2546     background-repeat:no-repeat;
2547     margin-right:5px;
2548     -webkit-border-radius:2px;
2549     -moz-border-radius:2px;
2550     border-radius:2px;
2551     padding-left:15px;
2552 }
2553 #acl-wrapper a:hover {
2554     text-decoration:none;
2555     color:#000;
2556 }
2557 .acl-button-show {
2558     background-image:url('../../../images/show_off.png');
2559 }
2560 .acl-button-hide {
2561     background-image:url('../../../images/hide_off.png');
2562 }
2563 .acl-button-show.selected {
2564     color:#000;
2565     background-color:#9ade00;
2566     background-image:url(../../../images/show_on.png);
2567 }
2568 .acl-button-hide.selected {
2569     color:#000;
2570     background-color:#ff4141;
2571     background-image:url(../../../images/hide_on.png);
2572 }
2573 .acl-list-item.groupshow {
2574     border-color:#9ade00;
2575 }
2576 .acl-list-item.grouphide {
2577     border-color:#ff4141;
2578 }
2579 /** /acl **/
2580
2581
2582 /* autocomplete popup */
2583 .acpopup {
2584         max-height:150px;
2585         background-color:#555753;
2586         color: #FFFFFF;
2587         overflow:auto;
2588         z-index:100000;
2589         border:1px solid #cccccc;
2590 }
2591 .acpopupitem {
2592         background-color:#555753;
2593     padding: 4px;
2594         clear:left;
2595 }
2596 .acpopupitem img {
2597         float: left;
2598         margin-right: 4px;
2599 }
2600 .acpopupitem.selected {
2601         color: #2e3436;
2602     background-color: #eeeeec;
2603 }
2604 .qcomment-wrapper {
2605     padding: 0px;
2606     margin: 2px;
2607     list-style-type: none;
2608 }
2609 .qcomment, .qcomment:hover {
2610     display: inline;
2611     padding: 5px;
2612     margin: 5px;
2613 }
2614 .qcomment {
2615         opacity: 0.5;
2616         filter:alpha(opacity=50);
2617 }
2618 .qcomment:hover {
2619         opacity: 1.0;
2620         filter:alpha(opacity=100);
2621 }
2622 #network-star-link {
2623     margin-top: 10px;
2624 }
2625 .network-star {
2626     float: left;
2627     margin-right: 5px;
2628 }
2629 .network-star.icon.starred {
2630     display: inline-block;
2631 }
2632