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: #ff0;
 147     font-size: 16px;
 148     font-weight: bold;
 149     margin: 3px;
 150 }
 151 .fakelink, .lockview {
 152     color: #3465a4;
 153     cursor: pointer;
 154 }
 155 .fakelink:hover {
 156     color: #729fcf;
 157 }
 158 input[type=submit] {
 159     margin-top: 10px;
 160     height: 22px;
 161     background-color: #555753;
 162     color: #eeeeec;
 163     -webkit-border-radius: 5px;
 164     -moz-border-radius: 5px;
 165     border-radius: 5px;
 166     border: 0;
 167 }
 168 .smalltext {
 169     font-size: 0.7em;
 170 }
 171 #panel {
 172         position: absolute;
 173         font-size: 0.8em;
 174         -webkit-border-radius: 5px;
 175         -moz-border-radius: 5px;
 176         border-radius: 5px;
 177         border: 1px solid #fff;
 178         background-color: #2e3436;
 179         color: #eeeeec;
 180         padding: 1em;
 181 }
 182 .pager {
 183         margin-top: 60px;
 184         display: block;
 185         clear: both;
 186         text-align: center;
 187 }
 188 .pager span {
 189     padding: 4px;
 190     margin: 4px;
 191 }
 192 .pager_current {
 193     background-color: #729fcf;
 194     color: #fff;
 195 }
 196
 197 /**
 198  * global
 199  */
 200 /* .tool .action */
 201 .action {
 202     float: right;
 203 }
 204
 205 /**
 206  *      login
 207  */
 208 #login-extra-links a {
 209     margin-right: 20px;
 210 }
 211
 212 /*********
 213 * nav
 214 *********/
 215 nav {
 216         height: 60px;
 217         display: block;
 218         background-color: #2e3436;
 219         color: #eeeeec;
 220         position: relative;
 221         padding: 20px 20px 10px 95px;
 222     margin-left: auto;
 223     margin-right: auto;
 224 }
 225 nav a {
 226         text-decoration: none;
 227         color: #eeeeec;
 228         border: 0px;
 229 }
 230 nav a:hover {
 231         text-decoration: none;
 232         color: #eeeeec;
 233     border: 0px;
 234 }
 235 nav #banner {
 236         display: block;
 237         position: absolute;
 238         left: 51px;
 239         top: 25px;
 240 }
 241 nav #banner #logo-text a {
 242         font-size: 40px;
 243         font-weight: bold;
 244         margin-left: 3px;
 245 }
 246 nav #user-menu {
 247     display: block;
 248     width: auto;
 249     float: right;
 250     margin: 3px 68px 0 0;
 251     position: relative;
 252         background-color: #555753;
 253     -webkit-border-radius: 5px;
 254     -moz-border-radius: 5px;
 255     border-radius: 5px;
 256     background: #555753 url("menu-user-pin.jpg") 98% center no-repeat;
 257     clear: both;
 258 }
 259 nav #user-menu-label {
 260         float: left;
 261         font-size: 12px;
 262     padding: 3px 20px 9px 5px;
 263     height: 10px;
 264 }
 265 ul#user-menu-popup {
 266         display: none;
 267         position: absolute;
 268         background-color: #555753;
 269         width: 100%;
 270     padding: 10px 0px;
 271     margin: 0px;
 272         top: 20px;
 273         left: 0;
 274         -webkit-border-radius: 0 0 5px 5px;
 275         -moz-border-radius: 0 0 5px 5px;
 276         border-radius: 0 0 5px 5px;
 277         z-index: 10000;
 278 }
 279 ul#user-menu-popup li {
 280         display: block;
 281 }
 282 ul#user-menu-popup li a {
 283         display: block;
 284         padding: 5px;
 285 }
 286 ul#user-menu-popup li a:hover {
 287         color: #2e3436;
 288         background-color: #eeeeec;
 289 }
 290 ul#user-menu-popup li a.nav-sep {
 291         border-top: 1px solid #eeeeec;
 292 }
 293 #nav-buttons {
 294     clear: both;
 295         list-style: none;
 296         padding: 0px;
 297 }
 298 #nav-buttons li {
 299         padding: 0;
 300 }
 301 nav .nav-link {
 302         float: right;
 303         display: block;
 304         width: 22px;
 305         height: 22px;
 306         overflow: hidden;
 307         margin: 0px 5px 5px;
 308         text-indent: 50px;
 309         background: transparent url(icons.png) 0 0 no-repeat;
 310 }
 311 #nav-apps-link {
 312         background-position: 0 -66px;
 313 }
 314 #nav-apps-link:hover {
 315         background-position: -22px -66px;
 316 }
 317 #nav-community-link {
 318     background-position: 0 -22px;
 319 }
 320 #nav-community-link:hover {
 321     background-position: -22px -22px;
 322 }
 323 #nav-contacts-link {
 324     background-position: 0 -22px;
 325 }
 326 #nav-contacts-link:hover {
 327     background-position: -22px -22px;
 328 }
 329 #nav-directory-link {
 330         background-position: -44px -154px;
 331 }
 332 #nav-directory-link:hover {
 333         background-position: -66px -154px;
 334 }
 335 #nav-help-link {
 336         background-position: 0 -110px;
 337 }
 338 #nav-help-link:hover {
 339         background-position: -22px -110px;
 340 }
 341 #nav-home-link {
 342     background-position: -44px -132px;
 343 }
 344 #nav-home-link:hover {
 345     background-position: -66px -132px;
 346 }
 347 #nav-login-link {
 348         background-position: 0 -88px;
 349 }
 350 #nav-login-link:hover {
 351         background-position: -22px -88px;
 352 }
 353 #nav-logout-link {
 354         background-position: 0 -88px;
 355 }
 356 #nav-logout-link:hover {
 357         background-position: -22px -88px;
 358 }
 359 #nav-messages-link {
 360     background-position: -44px -88px;
 361 }
 362 #nav-messages-link:hover {
 363     background-position: -66px -88px;
 364 }
 365 #nav-notify-link, #nav-notifications-linkmenu {
 366     background-position: -44px -110px;
 367 }
 368 #nav-notify-link:hover {
 369     background-position: -66px -110px;
 370 }
 371 #nav-network-link {
 372     background-position: 0px -177px;
 373 }
 374 #nav-network-link:hover {
 375     background-position: -22px -177px;
 376 }
 377 #nav-search-link {
 378         background-position: 0 -44px;
 379 }
 380 #nav-search-link:hover {
 381         background-position: -22px -44px;
 382 }
 383 #profile-link,
 384 #profile-title,
 385 #wall-image-upload,
 386 #wall-file-upload,
 387 #profile-attach-wrapper,
 388 #profile-audio,
 389 #profile-link,
 390 #profile-location,
 391 #profile-nolocation,
 392 #profile-title,
 393 #jot-title,
 394 #profile-upload-wrapper,
 395 #profile-video,
 396 #profile-jot-submit,
 397 #wall-image-upload-div,
 398 #wall-file-upload-div,
 399 .icon, .hover, .focus, .pointer {
 400     cursor: pointer;
 401 }
 402 #notifications {
 403         height: 20px;
 404         width: 100%;
 405         position: absolute;
 406         top: -19px;
 407         left: 0;
 408 }
 409 /* popup notifications */
 410 div.jGrowl div.notice {
 411     background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 412     color: #ffffff;
 413     padding-left: 58px;
 414 }
 415 div.jGrowl div.info {
 416     background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 417     color: #ffffff;
 418     padding-left: 58px;
 419 }
 420 #nav-notifications-menu {
 421     margin: 30px 0 0 -45px;
 422     width: 300px;
 423     max-height: 400px;
 424     overflow: auto;
 425     font-size: 9pt;
 426 }
 427 #nav-notifications-menu .contactname {
 428     font-weight: bold;
 429     font-size: 0.9em;
 430 }
 431 #nav-notifications-menu img {
 432     float: left;
 433     margin-right: 5px;
 434 }
 435 #nav-notifications-menu .notif-when {
 436     font-size: 0.8em;
 437     display: block;
 438 }
 439 #nav-notifications-menu li {
 440     padding: 7px 0px 7px 10px;
 441     word-wrap: normal;
 442     border-bottom: 1px solid #000;
 443 }
 444 #nav-notifications-menu li:hover {
 445     color: black;
 446 }
 447 #nav-notifications-menu a:hover {
 448     color: black;
 449     text-decoration: underline;
 450 }
 451 nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 452   background-image: url("../../../images/icons/22/notify_on.png");
 453 }
 454 .show {
 455     display: block;
 456 }
 457 #nav-floater {
 458     position: fixed;
 459     top: 20px;
 460     right: 1%;
 461     padding: 5px;
 462     background: #2e3436;
 463     border-radius: 5px;
 464     z-index: 100;
 465 }
 466 .floaterflip {
 467         display: block;
 468     position: fixed;
 469     z-index: 110;
 470     top: 53px;
 471     right: 19px;
 472         width: 22px;
 473         height: 22px;
 474         overflow: hidden;
 475         margin: 0px;
 476         background: transparent url(icons.png) -190px -60px no-repeat;
 477 }
 478 .nav-ajax-update, .nav-ajax-left {
 479         width: 30px;
 480         height: 19px;
 481         background: transparent url(notifications.png) 0 0 no-repeat;
 482         color: #222;
 483         font-weight: bold;
 484         font-size: 0.8em;
 485         padding-top: 0.2em;
 486         text-align: center;
 487         float: left;
 488         margin: 0 -1px 0 3px;
 489         display: block;
 490         visibility: hidden;
 491 }
 492 .nav-ajax-update.show, .nav-ajax-left.show {
 493     visibility: visible;
 494 }
 495 #net-update {
 496         background-position: 0px 0px;
 497 }
 498 #mail-update {
 499         background-position: -30px 0;
 500 }
 501 #notify-update {
 502         background-position: -60px 0px;
 503 }
 504 #home-update {
 505         background-position: -90px 0px;
 506 }
 507 #lang-select-icon {
 508         cursor: pointer;
 509         position: absolute;
 510         left: 0;
 511         top: 0;
 512 }
 513 #language-selector {
 514     position: absolute;
 515     top: 0;
 516     left: 16px;
 517     padding-right: 50px;
 518 }
 519 .menu-popup {
 520     position: absolute;
 521     display: none;
 522     width: 11em;
 523     background: #ffffff;
 524     color: #2d2d2d;
 525     margin: 0px;
 526     padding: 0px;
 527     list-style: none;
 528     border: 3px solid #364e59;
 529     z-index: 100000;
 530     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 531     -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 532     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 533 }
 534 .menu-popup a {
 535     display: block;
 536     color: #2d2d2d;
 537     padding: 5px 10px;
 538     text-decoration: none;
 539 }
 540 .menu-popup a:hover {
 541     background-color: #bdcdd4;
 542 }
 543 .menu-popup .menu-sep {
 544     border-top: 1px solid #9eabb0;
 545 }
 546 .menu-popup li {
 547     float: none;
 548     overflow: auto;
 549     height: auto;
 550     display: block;
 551 }
 552 .menu-popup li img {
 553     float: left;
 554     width: 16px;
 555     height: 16px;
 556     padding-right: 5px;
 557 }
 558 .menu-popup .empty {
 559     padding: 5px;
 560     text-align: center;
 561     color: #9eabb0;
 562 }
 563 .notif-item {
 564     font-size: small;
 565 }
 566 .notif-item a {
 567     vertical-align: middle;
 568 }
 569 .notif-image {
 570     width: 32px;
 571     height: 32px;
 572     padding: 7px 7px 0px 0px;
 573 }
 574 .notify-seen {
 575     background: #ddd;
 576 }
 577
 578 /** sysmsg **/
 579 #sysmsg_info {
 580         position:fixed;
 581         bottom:0;
 582         -moz-box-shadow:0 0 5px #888;
 583         -webkit-box-shadow:0 0 5px #888;
 584         box-shadow:0 0 5px #888;
 585     padding: 10px;
 586         background-color:#fcaf3e;
 587         border:2px solid #f8911b;
 588         border-bottom:0;
 589         padding-bottom: 50px;
 590         z-index: 1000;
 591 }
 592 #sysmsg {
 593         position: fixed;
 594         bottom: 0;
 595         -moz-box-shadow: 0 0 5px #888;
 596         -webkit-box-shadow: 0 0 5px #888;
 597         box-shadow: 0 0 5px #888;
 598     padding: 10px;
 599         background-color: #fcaf3e;
 600         border: 2px solid #f8911b;
 601         border-bottom: 0;
 602         padding-bottom: 50px;
 603         z-index: 1000;
 604 }
 605 #sysmsg_info br,
 606 #sysmsg br {
 607         display: block;
 608         margin: 2px 0px;
 609         border-top: 1px solid #ccccce;
 610 }
 611
 612
 613 /**
 614 * aside
 615 **/
 616 aside {
 617     position: absolute;
 618     right: 15px;
 619     width: 245px;
 620         padding-top: 15px;
 621     font-size: smaller;
 622 }
 623 .vcard .fn {
 624         font-size: 1.7em;
 625         font-weight: bold;
 626         border-bottom: 1px solid #729fcf;
 627         padding-bottom: 3px;
 628 }
 629 .vcard #profile-photo-wrapper {
 630         margin: 20px;
 631 }
 632 .vcard #profile-photo-wrapper img {
 633         box-shadow: 3px 3px 10px 0;
 634 }
 635 aside h4 {
 636         font-size: 1.2em;
 637 }
 638 aside #viewcontacts {
 639         text-align: right;
 640 }
 641 .aprofile dt {
 642     box-shadow: 1px 1px 5px 0;
 643     color: #666666;
 644     margin: 15px 0 5px;
 645     padding-left: 5px;
 646 }
 647 #profile-extra-links ul {
 648         margin-left: 0px;
 649     padding-left: 0px;
 650     list-style: none;
 651 }
 652 #dfrn-request-link {
 653         background:#3465A4 url(connect.png) no-repeat 95% center;
 654         border-radius:5px 5px 5px 5px;
 655         color:#fff;
 656         display:block;
 657         font-size:1.2em;
 658         padding:.2em .5em;
 659 }
 660 #netsearch-box {
 661         margin: 30px 0px;
 662 }
 663
 664
 665 /**
 666 * contacts block
 667 */
 668 .contact-block-div {
 669     width: 50px;
 670     height: 50px;
 671     float: left;
 672 }
 673 .contact-block-textdiv {
 674     width: 150px;
 675     height: 34px;
 676     float: left;
 677 }
 678 #contact-block-end {
 679     clear: both;
 680 }
 681
 682
 683 /**
 684  * jot
 685  **/
 686 #jot {
 687   /*width: 785px;*/
 688   margin: 10px 0 20px 0px;
 689   width: 100%;
 690 }
 691 #jot #jot-tools {
 692   margin: 0px;
 693   padding: 0px;
 694   height: 35px;
 695   overflow: none;
 696   width: 100%;
 697   /*background-color: #0e232e;*/
 698   /*border-bottom: 2px solid #9eabb0;*/
 699 }
 700 #jot #jot-tools span {
 701     float: left;
 702     margin: 10px 20px 2px 0px;
 703 }
 704 #jot #jot-tools span a {
 705     display: block;
 706     /*color: #cccccc;    */
 707     /*width: 100%;       */
 708     /*height: 40px;      */
 709     /*text-align: center;*/
 710     /*line-height: 40px; */
 711     /*overflow: hidden;*/
 712 }
 713 /*#jot #jot-tools li:hover {*/
 714     /*background-color: #364e59;*/
 715 /*}*/
 716 #jot #jot-tools .perms {
 717     float: right;
 718     width: 40px;
 719 }
 720 /*#jot #jot-tools .perms a.unlock {*/
 721 /*    width: 30px;                    */
 722 /*    border-left: 10px solid #cccccc;*/
 723 /*    background-color: #cccccc;      */
 724 /*}*/
 725 /*#jot #jot-tools .perms a.lock {*/
 726 /*    width: 30px;                    */
 727 /*    border-left: 10px solid #666666;*/
 728 /*    background-color: #666666;      */
 729 /*}*/
 730 /*#jot #jot-tools li.submit {            */
 731 /*    float: right;                      */
 732 /*    background-color: #cccccc;         */
 733 /*    border-bottom: 2px solid #cccccc;  */
 734 /*    border-right: 1px solid #666666;   */
 735 /*    border-left: 1px solid #666666;    */
 736 /*}                                      */
 737 /*#jot #jot-tools li.submit input {      */
 738 /*    border: 0px;                       */
 739 /*    margin: 0px;                       */
 740 /*    padding: 0px;                      */
 741 /*    background-color: #cccccc;         */
 742 /*    color: #666666;                    */
 743 /*    width: 80px;                       */
 744 /*    height: 40px;                      */
 745 /*    line-height: 40px;                 */
 746 /*}                                      */
 747 /*#jot #jot-tools li.submit input:hover {*/
 748 /*    background-color: #bdcdd4;         */
 749 /*    color: #666666;                    */
 750 /*}                                      */
 751 #jot #jot-tools li.loading {
 752     float: right;
 753     background-color: #ffffff;
 754     width: 20px;
 755     vertical-align: center;
 756     text-align: center;
 757     border-top: 2px solid #9eabb0;
 758     height: 38px;
 759 }
 760 #jot #jot-tools li.loading img {
 761     margin-top: 10px;
 762 }
 763 #jot #jot-title {
 764         border: 1px solid #ccc;
 765     margin: 0 0 5px;
 766     height: 20px;
 767     width: 90%;
 768     font-weight: bold;
 769     border-radius: 5px;
 770         vertical-align: middle;
 771 }
 772 #jot #character-counter {
 773         width: 6%;
 774         float: right;
 775         text-align: right;
 776         height: 15px;
 777         line-height: 20px;
 778         padding: 2px 20px 5px 0;
 779 }
 780 #profile-jot-text_tbl {
 781         margin-bottom: 10px;
 782 }
 783 #profile-jot-text_ifr {
 784         width:99.900002% !important;
 785 }
 786 #profile-attach-wrapper,
 787 #profile-audio-wrapper,
 788 #profile-link-wrapper,
 789 #profile-location-wrapper,
 790 #profile-nolocation-wrapper,
 791 #profile-title-wrapper,
 792 #profile-upload-wrapper,
 793 #profile-video-wrapper {
 794     float: left;
 795         margin: 0 20px 0 0;
 796 }
 797 #profile-rotator-wrapper {
 798         float: right;
 799 }
 800 #profile-jot-tools-end,
 801 #profile-jot-banner-end {
 802         clear: both;
 803 }
 804 #profile-jot-email-wrapper {
 805         margin:10px 10% 0;
 806         border:1px solid #555753;
 807         border-bottom:0;
 808 }
 809 #profile-jot-email-label {
 810         background-color:#555753;
 811         color:#ccccce;
 812         padding:5px;
 813 }
 814 #profile-jot-email {
 815         width:90%;
 816         margin:5px;
 817 }
 818 #profile-jot-networks {
 819         margin: 0 10%;
 820         border: 1px solid #555753;
 821         border-top: 0;
 822         border-bottom: 0;
 823         padding: 5px;
 824 }
 825 #jot-preview-link {
 826     margin: 0 0 0 10px;
 827     border: 0;
 828     text-decoration: none;
 829         float: right;
 830 }
 831 .icon-text-preview {
 832         margin: 0 0 -18px 0;
 833         display: block;
 834     width: 20px;
 835     height: 20px;
 836     background: url(icons.png) no-repeat -128px -40px;
 837     border: 0;
 838     text-decoration: none;
 839         float: right;
 840 }
 841 #profile-jot-perms {
 842         float: right;
 843     background-color: #555753;
 844     height: 22px;
 845     width: 20px;
 846     -webkit-border-radius: 5px 0px 0px 5px;
 847     -moz-border-radius: 5px 0px 0px 5px;
 848     border-radius: 5px 0px 0px 5px;
 849     overflow: hidden;
 850     border: 0px;
 851     margin: 0 -4px 0 10px;
 852 }
 853 #profile-jot-plugin-wrapper {
 854         width: 1px;
 855         margin: 10px 0 0 0;
 856         float: right;
 857 }
 858 #profile-jot-submit-wrapper {
 859         float: right;
 860         width: 100%;
 861         list-style: none;
 862         margin: 10px 0 0 0;
 863         padding: 0;
 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         float: right;
 875 }
 876 #jot-perms-icons {
 877         background-color: #555753;
 878         height: 22px;
 879         width: 20px;
 880         -webkit-border-radius: 0 5px 5px 0;
 881         -moz-border-radius: 0 5px 5px 0;
 882         border-radius: 0 5px 5px 0;
 883         overflow: hidden;
 884         border: 0;
 885         margin: 0 0 0 94.4%;
 886 }
 887 #profile-jot-acl-wrapper {
 888         margin: 0 10px;
 889         border: 1px solid #555753;
 890         border-top: 0;
 891         display: block !important;
 892 }
 893 #group_allow_wrapper,
 894 #group_deny_wrapper,
 895 #acl-permit-outer-wrapper {
 896         width:47%;
 897         float:left;
 898 }
 899 #contact_allow_wrapper,
 900 #contact_deny_wrapper,
 901 #acl-deny-outer-wrapper {
 902         width:47%;
 903         float:right;
 904 }
 905 #acl-permit-text {
 906         background-color: #555753;
 907         color: #ccccce;
 908         padding: 5px;
 909         float: left;
 910 }
 911 #jot-public {
 912         background-color: #555753;
 913         color: #ff0000;
 914         padding: 5px;
 915         float: left;
 916 }
 917 #acl-deny-text {
 918         background-color: #555753;
 919         color: #ccccce;
 920         padding: 5px;
 921         float: left;
 922 }
 923 #acl-permit-text-end,
 924 #acl-deny-text-end {
 925         clear: both;
 926 }
 927 #jot-title-desc {
 928         color: #cccccc;
 929 }
 930 #profile-jot-desc {
 931         color: #a00;
 932 }
 933 #jot-title-wrapper {
 934         margin-bottom: 5px;
 935 }
 936 #jot-title {
 937         border: 1px solid #cccccc;
 938         width: 90%;
 939 }
 940 #jot-title-display {
 941         font-weight: bold;
 942 }
 943 .jothidden {
 944     display: none;
 945 }
 946 #jot-preview-content {
 947     background-color: #ffffe0;
 948     border: 1px #aaaa00 solid;
 949     border-radius: 3px;
 950     padding: 3px 3px 6px 10px;
 951 }
 952
 953
 954 /**
 955  * section
 956  */
 957 section {
 958     margin: 20px 6% 0 4%;
 959     font-size: 0.8em;
 960     padding-right: 230px;
 961         min-width: 475px;
 962 }
 963
 964 /** tabs **/
 965 .tabs {
 966     list-style: none;
 967     margin: 10px 0 10px;
 968     padding: 0;
 969     border-bottom: 1px solid #729fcf;
 970     font-size: 14px;
 971 }
 972 .tabs li {
 973     display: inline;
 974 }
 975 .tab {
 976     padding: 0 5px;
 977 }
 978 .tab:hover {
 979     background-color: #729fcf;
 980     color: #eeeeec;
 981     border: 0px;
 982 }
 983 .tab:active {
 984     background-color: #729fcf;
 985     color: #eeeeec;
 986     border: 0px;
 987 }
 988
 989
 990 /**
 991  *      items
 992  */
 993 .wall-item-outside-wrapper {
 994         border: 1px solid #aaa;
 995         border-radius: 5px;
 996 }
 997 .wall-item-outside-wrapper.comment {
 998         margin-top: 5px;
 999 }
1000 .wall-item-outside-wrapper-end {
1001     clear: both;
1002 }
1003 .wall-item-content-wrapper {
1004     position: relative;
1005         padding: 10px;
1006         width: auto;
1007 }
1008 .wall-item-outside-wrapper .wall-item-comment-wrapper {
1009     /*margin-left: 90px;*/
1010 }
1011 .shiny {
1012     background: #efefdf;
1013 }
1014 .wall-item-content {
1015         overflow-x: auto;
1016 }
1017 /* removing it from here, vs. putting it in .wall-item-content
1018  * might break things for people. we shall see ;) */
1019 [id^="tread-wrapper"], [class^="tread-wrapper"] {
1020     margin: 15px 0 0 0;
1021     padding: 0px;
1022         /*overflow-x: auto;*/
1023 }
1024 .wall-item-photo-menu {
1025     display: none;
1026 }
1027 .wall-item-photo-menu-button {
1028     display:none;
1029     text-indent:-99999px;
1030     background:#555753 url(menu-user-pin.jpg) no-repeat 75px center;
1031     position:absolute;
1032     overflow:hidden;
1033     height:20px;
1034     width:90px;
1035     top:85px;
1036     left:0;
1037     -webkit-border-radius:0 0 5px 5px;
1038     -moz-border-radius:0 0 5px 5px;
1039     border-radius:0 0 5px 5px;
1040 }
1041 .wall-item-info {
1042     float: left;
1043     width: 110px;
1044 }
1045 .wall-item-photo-wrapper {
1046     width: 80px;
1047     height: 80px;
1048     position: relative;
1049     padding: 5px;
1050     background-color: #555753;
1051     -webkit-border-radius: 5px;
1052     -moz-border-radius: 5px;
1053     border-radius: 5px;
1054 }
1055 [class^="wall-item-tools"] > *, [class^="wall-item-tools"] > * > * {
1056         margin: 0 0 5px 0;
1057 }
1058 .wall-item-tools {
1059     float: right;
1060     filter: alpha(opacity=35);
1061     opacity: 0.4;
1062     -webkit-transition: all 1s ease-in-out;
1063     -moz-transition: all 1s ease-in-out;
1064     -o-transition: all 1s ease-in-out;
1065     -ms-transition: all 1s ease-in-out;
1066     transition: all 1s ease-in-out;
1067 }
1068 .wall-item-tools:hover {
1069     filter: alpha(opacity=100);
1070     opacity: 1;
1071     -webkit-transition: all 1s ease-in-out;
1072     -moz-transition: all 1s ease-in-out;
1073     -o-transition: all 1s ease-in-out;
1074     -ms-transition: all 1s ease-in-out;
1075     transition: all 1s ease-in-out;
1076 }
1077 .wall-item-title {
1078         font-size: 1.2em;
1079         font-weight: bold;
1080     margin-bottom: 1em;
1081 }
1082 .wall-item-body {
1083         margin: 10px 10px 10px 0px;
1084     text-align: left;
1085 }
1086 .wall-item-lock-wrapper {
1087         float: right;
1088 }
1089 .wall-item-dislike,
1090 .wall-item-like {
1091         clear: left;
1092         font-size: 0.8em;
1093         color: #878883;
1094         margin: 5px 0 5px 120px;
1095 }
1096 .wall-item-author, .wall-item-actions-author {
1097         clear: left;
1098         font-size: 0.8em;
1099         color: #878883;
1100         margin: 20px 0 0 110px;
1101 }
1102 .wall-item-ago {
1103         display: inline;
1104         padding-left: 10px;
1105 }
1106 .wall-item-wrapper-end {
1107         clear:both;
1108 }
1109 .wall-item-location {
1110     margin-top: 10px;
1111     width: 100px;
1112     overflow: hidden;
1113     text-overflow: ellipsis;
1114     -o-text-overflow: ellipsis;
1115 }
1116 .wall-item-location .icon {
1117     float: left;
1118 }
1119 .wall-item-location > a {
1120     margin-left: 25px;
1121     font-size: 0.7em;
1122     display: block;
1123 }
1124 .wall-item-location .smalltext {
1125     margin-left: 25px;
1126     font-size: 0.7em;
1127     display: block;
1128 }
1129 .wall-item-location > br {
1130     display: none;
1131 }
1132 .wallwall .wwto {
1133     left: 5px;
1134     margin: 0;
1135     position: absolute;
1136     top: 75px;
1137     width: 30px;
1138     z-index: 10001;
1139     width: 30px;
1140     height: 30px;
1141 }
1142 .wallwall .wwto img {
1143     width: 30px !important;
1144     height: 30px !important;
1145 }
1146 .wallwall .wall-item-photo-end {
1147     clear: both;
1148 }
1149 .wall-item-arrowphoto-wrapper {
1150     position: absolute;
1151     left: 35px;
1152     top: 80px;
1153     z-index: 10002;
1154 }
1155 .wall-item-photo-menu {
1156         min-width: 92px;
1157         border: 2px solid #FFFFFF;
1158         border-top: 0px;
1159         background: #555753;
1160         position: absolute;
1161         left: -2px; top: 101px;
1162         display: none;
1163         z-index: 10003;
1164         -webkit-border-radius: 0px 5px 5px 5px;
1165         -moz-border-radius: 0px 5px 5px 5px;
1166         border-radius: 0px 5px 5px 5px;
1167 }
1168 .wall-item-photo-menu ul {
1169     margin:0px;
1170     padding: 0px;
1171     list-style: none;
1172 }
1173 .wall-item-photo-menu li a {
1174     white-space: nowrap;
1175     display: block;
1176     padding: 5px 2px;
1177     color: #eeeeec;
1178 }
1179 .wall-item-photo-menu li a:hover {
1180     color: #555753;
1181     background: #eeeeec;
1182 }
1183 #item-delete-selected {
1184     overflow: auto;
1185     width: 100%;
1186 }
1187
1188
1189 /**
1190  *      comment
1191  */
1192 .ccollapse-wrapper {
1193     font-size: 0.9em;
1194     margin-left: 80px;
1195 }
1196
1197 .wall-item-outside-wrapper.comment {
1198     margin-left: 80px;
1199 }
1200 .wall-item-outside-wrapper.comment .wall-item-photo {
1201     width: 40px!important;
1202     height: 40px!important;
1203 }
1204 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {
1205     width: 40px;
1206     height: 40px;
1207 }
1208 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
1209         width: 50px;
1210     top: 45px;
1211     background-position: 35px center;
1212 }
1213 .wall-item-outside-wrapper.comment .wall-item-info {
1214     width: 60px;
1215 }
1216 .wall-item-outside-wrapper.comment .wall-item-body {
1217     margin-left: 10px;
1218 }
1219 .wall-item-outside-wrapper.comment .wall-item-author {
1220     margin-left: 50px;
1221 }
1222
1223 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
1224     min-width: 50px;
1225     top: 60px;
1226 }
1227 .comment-wwedit-wrapper {
1228     /*margin: 30px 0px 0px 80px;*/
1229 }
1230 .comment-edit-wrapper {
1231     border-top: 1px #aaa solid;
1232 }
1233 .comment-wwedit-wrapper img,
1234 .comment-edit-wrapper img {
1235         width: 20px;
1236         height: 20px;
1237 }
1238 .comment-edit-photo-link, .comment-edit-photo {
1239         float: left;
1240         margin-left: 10px;
1241 }
1242 .my-comment-photo {
1243     width: 40px;
1244     height: 40px;
1245     padding: 5px;
1246 }
1247 [class^="comment-edit-text"] {
1248     margin: 5px 0 10px 20px;
1249     width: 86.5%;
1250 }
1251 .comment-edit-text-empty {
1252         height: 20px;
1253         border: 2px #babdd6 solid;
1254         border-radius: 5px;
1255         color: #babdb6;
1256         -webkit-transition: all 0.5s ease-in-out;
1257         -moz-transition: all 0.5s ease-in-out;
1258         -o-transition: all 0.5s ease-in-out;
1259         -ms-transition: all 0.5s ease-in-out;
1260         transition: all 0.5s ease-in-out;
1261 }
1262 .comment-edit-text-empty:hover {
1263         color: #999999;
1264 }
1265 .comment-edit-text-full {
1266         height: 10em;
1267     border-radius: 5px;
1268         -webkit-transition: all 0.5s ease-in-out;
1269         -moz-transition: all 0.5s ease-in-out;
1270         -o-transition: all 0.5s ease-in-out;
1271         -ms-transition: all 0.5s ease-in-out;
1272         transition: all 0.5s ease-in-out;
1273 }
1274 .comment-edit-submit-wrapper {
1275         width: 90%;
1276         margin: 5px 5px 10px 50px;
1277         text-align: right;
1278 }
1279 .comment-edit-submit {
1280     height: 22px;
1281     background-color: #555753;
1282     color: #eeeeec;
1283     -webkit-border-radius: 5px;
1284     -moz-border-radius: 5px;
1285     border-radius: 5px;
1286     border: 0;
1287 }
1288
1289
1290 /**
1291  * item text style
1292  **/
1293 .wall-item-body code {
1294         display: block;
1295         padding-left: 10px;
1296         border-color: #ccc;
1297         border-style: solid;
1298         border-width: 1px 1px 1px 10px;
1299         background: #eee;
1300         width: 95%;
1301 }
1302
1303
1304 /**
1305  * profile
1306  **/
1307 div[id$="text"] {
1308     font-weight: bold;
1309     border-bottom: 1px solid #ccc;
1310 }
1311 div[id$="wrapper"] {
1312     height: 100%;
1313     margin-bottom: 1em;
1314 }
1315 div[id$="wrapper"] br {
1316     clear: left;
1317 }
1318 #advanced-profile-with {
1319     margin-left: 200px;
1320 }
1321
1322
1323 /**
1324  * photos
1325  **/
1326 .photos {
1327         height: auto;
1328         overflow: auto;
1329 }
1330 #photo-top-links {
1331     margin-bottom: 30px;
1332 }
1333 .photo-album-image-wrapper,
1334 .photo-top-image-wrapper {
1335     float: left;
1336     -moz-box-shadow: 0 0 5px #888;
1337     -webkit-box-shadow: 0 0 5px #888;
1338     box-shadow: 0 0 5px #888;
1339     background-color: #eee;
1340     -webkit-border-radius: 5px;
1341     -moz-border-radius: 5px;
1342     border-radius: 5px;
1343     padding-bottom: 30px;
1344     position: relative;
1345     margin: 0 10px 10px 0;
1346 }
1347
1348 #photo-photo {
1349     max-width: 100%;
1350 }
1351 #photo-photo img {
1352     max-width: 100%;
1353 }
1354 .photo-top-image-wrapper a:hover,
1355 #photo-photo a:hover,
1356 .photo-album-image-wrapper a:hover {
1357     border-bottom: 0;
1358 }
1359 .photo-top-photo,.photo-album-photo {
1360     -webkit-border-radius:5px 5px 0 0;
1361     -moz-border-radius:5px 5px 0 0;
1362     border-radius:5px 5px 0 0;
1363 }
1364 .photo-top-album-name {
1365     position: absolute;
1366     bottom: 0;
1367     padding: 0 5px;
1368 }
1369 .caption {
1370     position: absolute;
1371     bottom: 0;
1372     margin: 0 5px;
1373 }
1374 #photo-photo {
1375         position: relative;
1376         float:left;
1377 }
1378 #photo-photo-end {
1379     clear: both;
1380 }
1381 #photo-prev-link,
1382 #photo-next-link {
1383     position:absolute;
1384     width:30%;
1385     height:100%;
1386     background-color:rgba(255,255,255,0.5);
1387     opacity:0;
1388     -webkit-transition:all .2s ease-in-out;
1389     -moz-transition:all .2s ease-in-out;
1390     -o-transition:all .2s ease-in-out;
1391     -ms-transition:all .2s ease-in-out;
1392     transition:all .2s ease-in-out;
1393     background-position:center center;
1394     background-repeat:no-repeat;
1395 }
1396 #photo-prev-link {
1397     left:0;
1398     top:0;
1399     background-image:url(prev.png);
1400 }
1401 #photo-next-link {
1402     right:0;
1403     top:0;
1404     background-image:url(next.png);
1405 }
1406
1407 #photo-prev-link a,#photo-next-link a {
1408     display:block;
1409     width:100%;
1410     height:100%;
1411     overflow:hidden;
1412     text-indent:-900000px;
1413 }
1414 #photo-prev-link:hover,
1415 #photo-next-link:hover {
1416     opacity:1;
1417     -webkit-transition:all .2s ease-in-out;
1418     -moz-transition:all .2s ease-in-out;
1419     -o-transition:all .2s ease-in-out;
1420     -ms-transition:all .2s ease-in-out;
1421     transition:all .2s ease-in-out;
1422 }
1423 #photo-next-link .icon,
1424 #photo-prev-link .icon {
1425     display: none;
1426 }
1427 #photos-upload-spacer,
1428 #photos-upload-new-wrapper,
1429 #photos-upload-exist-wrapper {
1430     margin-bottom: 1em;
1431 }
1432 #photos-upload-existing-album-text,
1433 #photos-upload-newalbum-div {
1434     background-color:#555753;
1435     color:#eeeeec;
1436     padding:1px;
1437 }
1438 #photos-upload-album-select,
1439 #photos-upload-newalbum {
1440     width: 99%;
1441 }
1442 #photos-upload-perms-menu {
1443     text-align: right;
1444 }
1445 #photo-edit-caption, #photo-edit-newtag, #photo-edit-albumname {
1446     float: left;
1447     margin-bottom: 25px;
1448 }
1449 #photo-edit-link-wrap {
1450     margin-bottom: 15px;
1451 }
1452 #photo-edit-caption {
1453         width: 100%;
1454 }
1455 #photo-edit-newtag {
1456         width: 100%;
1457 }
1458 #photo-like-div {
1459     margin-bottom: 25px;
1460 }
1461 #photo-edit-caption-end, #photo-edit-tags-end, #photo-edit-albumname-end {
1462     clear: both;
1463 }
1464 #photo-edit-delete-button {
1465     margin-left: 200px;
1466 }
1467 #photo-edit-end {
1468     margin-bottom: 35px;
1469 }
1470 #photo-caption {
1471     font-size: 110%;
1472     font-weight: bold;
1473     margin-top: 15px;
1474     margin-bottom: 15px;
1475 }
1476
1477 /**
1478  *      message
1479  */
1480 .prvmail-text {
1481     width: 100%;
1482 }
1483 #prvmail-subject {
1484     width: 100%;
1485 }
1486 #prvmail-submit-wrapper {
1487     margin-top: 10px;
1488 }
1489 #prvmail-submit {
1490     float:right;
1491     margin-top: 0;
1492 }
1493 #prvmail-submit-wrapper > div {
1494     margin-right:5px;
1495     float:left;
1496 }
1497 .mail-list-outside-wrapper {
1498     margin-top: 20px;
1499 }
1500 .mail-list-sender {
1501     float: left;
1502 }
1503 .mail-list-detail {
1504     margin-left: 90px;
1505 }
1506 .mail-list-sender-name {
1507     display: inline;
1508 }
1509 .mail-list-date {
1510     display: inline;
1511     font-size: 0.8em;
1512     padding-left: 10px;
1513 }
1514 .mail-list-subject {
1515     font-size: 1.5em;
1516 }
1517 .mail-list-delete-wrapper {
1518     float: right;
1519 }
1520 .mail-list-outside-wrapper-end {
1521     clear: both;
1522 }
1523 .mail-conv-sender {
1524     float: left;
1525     margin: 0px 5px 5px 0px;
1526 }
1527 .mail-conv-sender-photo {
1528     width: 32px;
1529     height: 32px;
1530 }
1531 .mail-conv-sender-name {
1532     float: left;
1533 }
1534 .mail-conv-date {
1535     float: right;
1536 }
1537 .mail-conv-subject {
1538     clear: right;
1539     font-weight: bold;
1540     font-size: 1.2em;
1541 }
1542 .mail-conv-body {
1543     clear: both;
1544 }
1545 .mail-conv-delete-wrapper {
1546     margin-top: 5px;
1547 }
1548
1549
1550 /**
1551  *      contacts
1552  */
1553 .view-contact-wrapper,
1554 .contact-entry-wrapper {
1555     float: left;
1556     margin-right: 5px;
1557     margin-bottom: 40px;
1558     width: 120px;
1559         height: 120px;
1560         padding: 3px;
1561     position: relative;
1562 }
1563 .contact-direction-wrapper {
1564     position: absolute;
1565     top: 20px;
1566 }
1567 .contact-edit-links {
1568     position: absolute;
1569     top: 60px;
1570 }
1571 .contact-entry-photo-wrapper {
1572
1573 }
1574 .contact-entry-photo {
1575         margin-left: 20px;
1576 }
1577 .contact-entry-name {
1578     width: 120px;
1579     font-weight: bold;
1580     /*overflow: hidden;*/
1581 }
1582 .contact-entry-photo {
1583         position: relative;
1584 }
1585 .contact-entry-edit-links .icon {
1586     border: 1px solid #babdb6;
1587     -webkit-border-radius: 3px;
1588     -moz-border-radius: 3px;
1589     border-radius: 3px;
1590     background-color: #fff;
1591 }
1592 #contact-entry-url, [id^="contact-entry-url"] {
1593     font-size: smaller;
1594     /*overflow: scroll;*/
1595 }
1596 #contact-entry-network, [id^="contact-entry-network"] {
1597     font-size: smaller;
1598     font-style: italic;
1599 }
1600 #contact-edit-banner-name {
1601     font-size: 1.5em;
1602 }
1603 #contact-edit-photo-wrapper {
1604     position: relative;
1605     float: left;
1606     padding: 20px;
1607 }
1608 #contact-edit-direction-icon {
1609     position:absolute;
1610     top:60px;
1611     left:0;
1612 }
1613 #contact-edit-nav-wrapper {
1614     margin-left: 0px;
1615 }
1616 #contact-edit-links {
1617     margin-top: 23px;
1618 }
1619 #contact-edit-links ul {
1620     list-style-type: none;
1621 }
1622 #contact-drop-links {
1623     margin-left:5px;
1624 }
1625 #contact-edit-nav-wrapper .icon {
1626         border: 1px solid #babdb6;
1627     -webkit-border-radius: 3px;
1628     -moz-border-radius: 3px;
1629     border-radius: 3px;
1630 }
1631 #contact-edit-poll-wrapper {
1632     margin-left: 0px;
1633 }
1634 #contact-edit-last-update-text {
1635     margin-bottom: 15px;
1636 }
1637 #contact-edit-last-updated {
1638     font-weight: bold;
1639 }
1640 #contact-edit-poll-text {
1641     display: inline;
1642 }
1643 #contact-edit-info_tbl, #contact-edit-info_parent {
1644     width: 100%;
1645 }
1646 .mceLayout {
1647     width: 100%;
1648 }
1649 #contact-edit-end {
1650     clear: both;
1651     margin-bottom: 65px;
1652 }
1653
1654 .contact-photo-menu-button {
1655     position: absolute;
1656     background-image: url("photo-menu.jpg");
1657     background-position: top left;
1658     background-repeat: no-repeat;
1659     margin: 0px; padding: 0px;
1660     width: 16px;
1661     height: 16px;
1662     top: 64px; left:0px;
1663     overflow: hidden;
1664     text-indent: 40px;
1665     display: none;
1666 }
1667 .contact-photo-menu {
1668     width: auto;
1669     border: 2px solid #444444;
1670     background: #FFFFFF;
1671     position: absolute;
1672     left: 0px; top: 90px;
1673     display: none;
1674     z-index: 10000;
1675 }
1676 .contact-photo-menu ul {
1677     margin:0px;
1678     padding: 0px;
1679     list-style: none;
1680 }
1681 .contact-photo-menu li a {
1682     display: block;
1683     padding: 2px;
1684 }
1685 .contact-photo-menu li a:hover {
1686     color: #fff;
1687     background: #3465A4;
1688     text-decoration: none;
1689 }
1690
1691
1692
1693 /**
1694  *      register, settings & profile forms
1695  */
1696 #id_openid_url,
1697 .openid {
1698     background:url(login-bg.gif) no-repeat;
1699     background-position:0 50%;
1700     padding-left:18px;
1701 }
1702
1703 #settings-nickname-desc {
1704     background-color: #eee;
1705     -webkit-border-radius: 5px;
1706     -moz-border-radius: 5px;
1707     border-radius: 5px;
1708     padding: 5px;
1709 }
1710 #settings-default-perms {
1711     margin-bottom: 20px;
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: 5px 2px 0 0;
1736 }
1737 .profile-edit-side-link {
1738     float: right;
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     height: 100px;
2128 }
2129 .field_help {
2130     display: block;
2131     margin-left: 297px;
2132     color: #666;
2133 }
2134 .field .onoff {
2135     float: left;
2136     width: 80px;
2137 }
2138 .field .onoff a {
2139     display: block;
2140     border: 1px solid #666;
2141     padding: 3px 6px 4px 10px;
2142     height: 16px;
2143     text-decoration: none;
2144 }
2145 .field .onoff .on {
2146         background: url("../../../images/onoff.jpg") no-repeat 42px 1px #999;
2147     color: #111;
2148     text-align: left;
2149 }
2150 .field .onoff .off {
2151         background: url("../../../images/onoff.jpg") no-repeat 2px 1px #ccc;
2152     color: #333;
2153     text-align: right;
2154 }
2155 .hidden {
2156     display:none !important;
2157 }
2158 .field.radio .field_help {
2159     margin-left: 0;
2160 }
2161
2162
2163 /*
2164  * UPDATE
2165  */
2166 .popup {
2167         width: 100%;
2168     height: 100%;
2169         top:0px;
2170     left:0px;
2171         position: absolute;
2172         display: none;
2173 }
2174 .popup .background {
2175         background-color: rgba(0,0,0,128);
2176         opacity: 0.5;
2177         width: 100%;
2178     height: 100%;
2179         position: absolute;
2180         top:0px;
2181     left:0px;
2182 }
2183 .popup .panel {
2184         top: 25%;
2185     left: 25%;
2186     width: 50%;
2187     height: 50%;
2188         padding: 1em;
2189         position: absolute;
2190         border: 4px solid #000000;
2191         background-color: #FFFFFF;
2192 }
2193 #panel {
2194     z-index: 100;
2195 }
2196 .grey {
2197     color: grey;
2198 }
2199 .orange {
2200     color: orange;
2201 }
2202 .red {
2203     color: red;
2204 }
2205 .popup .panel .panel_text {
2206     display: block;
2207     overflow: auto;
2208     height: 80%;
2209 }
2210 .popup .panel .panel_in {
2211     width: 100%;
2212     height: 100%;
2213     position: relative;
2214 }
2215 .popup .panel .panel_actions {
2216     width: 100%;
2217     bottom: 4px;
2218     left: 0px;
2219     position: absolute;
2220 }
2221 .panel_text .progress {
2222     width: 50%;
2223     overflow: hidden;
2224     height: auto;
2225     border: 1px solid #cccccc;
2226     margin-bottom: 5px;
2227 }
2228 .panel_text .progress span {
2229     float: right;
2230     display: block;
2231     width: 25%;
2232     background-color: #eeeeee;
2233     text-align: right;
2234 }
2235
2236 /**
2237  * OAuth
2238  */
2239 .oauthapp {
2240         height: auto;
2241     overflow: auto;
2242         border-bottom: 2px solid #cccccc;
2243         padding-bottom: 1em;
2244         margin-bottom: 1em;
2245 }
2246 .oauthapp img {
2247         float: left;
2248         width: 48px; height: 48px;
2249         margin: 10px;
2250 }
2251 .oauthapp img.noicon {
2252         background-image: url("../../../images/icons/48/plugin.png");
2253         background-position: center center;
2254         background-repeat: no-repeat;
2255 }
2256 .oauthapp a {
2257         float: left;
2258 }
2259
2260
2261 /**
2262  * ICONS
2263  */
2264 .iconspacer {
2265         display: block;
2266     width: 16px;
2267     height: 16px;
2268 }
2269 .icon {
2270     display: block;
2271     width: 20px;
2272     height: 20px;
2273     background: url(icons.png) no-repeat;
2274     border: 0;
2275     text-decoration: none;
2276 }
2277 .icon:hover {
2278     border: 0;
2279     text-decoration: none;
2280 }
2281 .icon.drop,
2282 .icon.drophide, .icon.delete {
2283     float: left;
2284 }
2285 /*.icon.s22 {
2286         display: block;
2287         background: url(icons.png) no-repeat;
2288         width: 22px;
2289         height: 22px;
2290 }*/
2291 .icon.s22.delete {
2292         display: block;
2293         background-position: -110px 0;
2294 }
2295 .icon.s22.text {
2296         padding: 10px 0px 0px 25px;
2297         width: 200px;
2298 }
2299 .icon.text {
2300     text-indent: 0px;
2301 }
2302 .icon.s16 {
2303     min-width: 16px;
2304     height: 16px;
2305 }
2306 .s16 .add {
2307     background: url("../../../images/icons/16/add.png") no-repeat;
2308 }
2309 .add {
2310     margin: 0px 5px;
2311 }
2312 .article {
2313         background-position: -50px 0;
2314 }
2315 .audio {
2316         background-position: -70px 0;
2317 }
2318 .block {
2319         background-position: -90px 0px;
2320 }
2321 .drop, .delete {
2322         background-position: -110px 0;
2323 }
2324 .drophide {
2325         background-position: -130px 0;
2326 }
2327 .edit {
2328         background-position: -150px 0;
2329 }
2330 .camera {
2331         background-position: -170px 0;
2332 }
2333 .dislike {
2334         background-position: -190px 0;
2335 }
2336 .like {
2337         background-position: -211px 0;
2338 }
2339 .link {
2340         background-position: -230px 0;
2341 }
2342 .globe, .location {
2343         background-position: -50px -20px;
2344 }
2345 .noglobe, .nolocation {
2346         background-position: -70px -20px;
2347 }
2348 .no {
2349         background-position: -90px -20px;
2350 }
2351 .pause {
2352         background-position: -110px -20px;
2353 }
2354 .play {
2355         background-position: -130px -20px;
2356 }
2357 .pencil {
2358         background-position: -151px -18px;
2359 }
2360 .small-pencil {
2361         background-position: -170px -20px;
2362 }
2363 .recycle {
2364         background-position: -190px -20px;
2365 }
2366 .remote-link {
2367         background-position: -210px -20px;
2368 }
2369 .share {
2370         background-position: -230px -20px;
2371 }
2372 .tools {
2373         background-position: -50px -40px;
2374 }
2375 .lock {
2376         background-position: -70px -40px;
2377 }
2378 .unlock {
2379         background-position: -90px -40px;
2380 }
2381 .video {
2382         background-position: -110px -40px;
2383 }
2384 .attach {
2385         background-position: -190px -40px;
2386 }
2387 .language {
2388         background-position: -210px -40px;
2389 }
2390 .starred {
2391         background-position: -130px -60px;
2392 }
2393 .unstarred {
2394         background-position: -150px -60px;
2395 }
2396 .tagged {
2397         background-position: -170px -60px;
2398 }
2399 .on {
2400         background-position: -50px  -60px;
2401 }
2402 .off {
2403         background-position: -70px  -60px;
2404 }
2405 .prev {
2406         background-position: -90px  -60px;
2407 }
2408 .next {
2409         background-position: -110px  -60px;
2410 }
2411 .icon.dim {
2412         opacity: 0.3;
2413         filter: alpha(opacity=30);
2414 }
2415 #pause {
2416         position: fixed;
2417         bottom: 5px;
2418         right: 5px;
2419 }
2420 .border, .border:hover {
2421         border: 1px solid #babdb6;
2422     -webkit-border-radius: 3px;
2423     -moz-border-radius: 3px;
2424     border-radius: 3px;
2425 }
2426 .attachtype {
2427     display: block;
2428     width: 20px;
2429     height: 23px;
2430     background-image: url(../../../images/content-types.png);
2431 }
2432 .type-video {
2433     background-position: 0px 0px;
2434 }
2435 .type-image {
2436     background-position: -20px 0;
2437 }
2438 .type-audio {
2439     background-position: -40px 0;
2440 }
2441 .type-text {
2442     background-position: -60px 0px;
2443 }
2444 .type-unkn {
2445     background-position: -80px 0;
2446 }
2447
2448
2449 /**
2450  *      footer
2451  */
2452 .cc-license {
2453     margin-top: 100px;
2454     font-size: 0.7em;
2455 }
2456 footer {
2457     display: block;
2458     margin: 50px 20%;
2459     clear: both;
2460 }
2461 #profile-jot-text {
2462     height: 20px;
2463     color: #666;
2464     border: 1px solid #ccc;
2465     border-radius: 5px;
2466     width: 99.5%;
2467 }
2468
2469
2470 /** acl **/
2471 #photo-edit-perms-select,
2472 #photos-upload-permissions-wrapper,
2473 #profile-jot-acl-wrapper {
2474     display: block !important;
2475 }
2476 #acl-wrapper {
2477     width: 690px;
2478     float: left;
2479 }
2480 #acl-search {
2481     float: right;
2482     background: #fff url("../../../images/search_18.png") no-repeat right center;
2483     padding-right: 20px;
2484 }
2485 #acl-showall {
2486     float:left;
2487     display:block;
2488     width:auto;
2489     height:18px;
2490     background-color:#CCC;
2491     background-image:url("../../../images/show_all_off.png");
2492     background-position:7px 7px;
2493     background-repeat:no-repeat;
2494     padding:7px 10px 7px 30px;
2495     -webkit-border-radius:5px;
2496     -moz-border-radius:5px;
2497     border-radius:5px;
2498     color:#999;
2499 }
2500 #acl-showall.selected {
2501     color:#000;
2502     background-color:#F90;
2503     background-image:url(../../../images/show_all_on.png);
2504 }
2505 #acl-list {
2506     height:210px;
2507     border:1px solid #ccc;
2508     clear:both;
2509     margin-top:30px;
2510     overflow:auto;
2511 }
2512 #acl-list-content {
2513 }
2514 .acl-list-item {
2515     display:block;
2516     width:150px;
2517     height:30px;
2518     border:1px solid #ccc;
2519     margin:5px;
2520     float:left;
2521 }
2522 .acl-list-item img {
2523     width:22px;
2524     height:22px;
2525     float:left;
2526     margin:4px;
2527 }
2528 .acl-list-item p {
2529     height: 12px;
2530     font-size: 10px;
2531     margin: 0;
2532     padding: 2px 0 1px;
2533 }
2534 .acl-list-item a {
2535     font-size:8px;
2536     display:block;
2537     width:40px;
2538     height:10px;
2539     float:left;
2540     color:#999;
2541     background-color:#CCC;
2542     background-position:3px 3px;
2543     background-repeat:no-repeat;
2544     margin-right:5px;
2545     -webkit-border-radius:2px;
2546     -moz-border-radius:2px;
2547     border-radius:2px;
2548     padding-left:15px;
2549 }
2550 #acl-wrapper a:hover {
2551     text-decoration:none;
2552     color:#000;
2553 }
2554 .acl-button-show {
2555     background-image:url('../../../images/show_off.png');
2556 }
2557 .acl-button-hide {
2558     background-image:url('../../../images/hide_off.png');
2559 }
2560 .acl-button-show.selected {
2561     color:#000;
2562     background-color:#9ade00;
2563     background-image:url(../../../images/show_on.png);
2564 }
2565 .acl-button-hide.selected {
2566     color:#000;
2567     background-color:#ff4141;
2568     background-image:url(../../../images/hide_on.png);
2569 }
2570 .acl-list-item.groupshow {
2571     border-color:#9ade00;
2572 }
2573 .acl-list-item.grouphide {
2574     border-color:#ff4141;
2575 }
2576 /** /acl **/
2577
2578
2579 /* autocomplete popup */
2580 .acpopup {
2581         max-height: 150px;
2582         background-color: #555753;
2583         color: #fff;
2584         overflow: auto;
2585         z-index: 100000;
2586         border: 1px solid #cccccc;
2587 }
2588 .acpopupitem {
2589         background-color: #555753;
2590     padding: 4px;
2591         clear: left;
2592 }
2593 .acpopupitem img {
2594         float: left;
2595         margin-right: 4px;
2596 }
2597 .acpopupitem.selected {
2598         color: #2e3436;
2599     background-color: #eeeeec;
2600 }
2601 .qcomment-wrapper {
2602     padding: 0px;
2603     margin: 2px;
2604     list-style-type: none;
2605 }
2606 .qcomment, .qcomment:hover {
2607     display: inline;
2608     padding: 5px;
2609     margin: 5px;
2610 }
2611 .qcomment {
2612         opacity: 0.5;
2613         filter:alpha(opacity=50);
2614 }
2615 .qcomment:hover {
2616         opacity: 1.0;
2617         filter:alpha(opacity=100);
2618 }
2619 #network-star-link {
2620     margin-top: 10px;
2621 }
2622 .network-star {
2623     float: left;
2624     margin-right: 5px;
2625 }
2626 .network-star.icon.starred {
2627     display: inline-block;
2628 }
2629