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 body, button, input, select, textarea {
  49     font-family: sans-serif;
  50     color: #222;
  51     background-color: rgb(254,254,254);
  52 }
  53 select {
  54         border: 1px #555 dotted;
  55         padding: 3px;
  56         margin: 2px;
  57 }
  58 option {
  59         padding: 3px;
  60         vertical-align: middle;
  61 }
  62 /* remember to define focus styles! */
  63 :focus {
  64     outline: 0;
  65 }
  66
  67 /* remember to highlight inserts somehow! */
  68 ins {
  69     background-color: #ff9;
  70     color: #000;
  71     text-decoration: none;
  72 }
  73 mark {
  74     background-color: #ff9;
  75     color: #000;
  76     font-style: italic;
  77     font-weight: bold;
  78 }
  79 /* Redeclare monospace font family: h5bp.com/j */
  80 pre, code, kbd, samp, .wall-item-body code {
  81     font-family: monospace, monospace;
  82     _font-family: 'courier new', monospace;
  83     font-size: 1em; }
  84
  85 /* Improve readability of pre-formatted text in all browsers */
  86 pre, .wall-item-body code {
  87     white-space: pre;
  88     white-space: pre-wrap;
  89     word-wrap: break-word;
  90 }
  91
  92 q {
  93     quotes: none;
  94 }
  95 q:before, q:after {
  96     content: "";
  97     content: none;
  98 }
  99 small {
 100     font-size: 85%;
 101 }
 102
 103 /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
 104 sub, sup {
 105     font-size: 75%;
 106     line-height: 0;
 107     position: relative;
 108     vertical-align: baseline;
 109 }
 110 sup {
 111     top: -0.5em;
 112 }
 113 sub {
 114     bottom: -0.25em;
 115 }
 116 img {
 117     border: 0 none;
 118     /*vertical-align: middle;*/
 119 }
 120 a {
 121     color: #3465a4;
 122     text-decoration: none;
 123     margin-bottom: 1px;
 124 }
 125 a:hover img {
 126     text-decoration: none;
 127 }
 128 blockquote {
 129     background: #eee;
 130     text-indent: 5px;
 131     padding: 5px;
 132     border: 1px #aaa solid;
 133     border-radius: 5px;
 134 }
 135 a:hover {
 136     color: #729fcf;
 137     padding-bottom: 0;
 138     border-bottom: 1px dotted #729fcf;
 139 }
 140 .required {
 141     display: inline;
 142     color: #ff0;
 143     font-size: 16px;
 144     font-weight: bold;
 145     margin: 3px;
 146 }
 147 .fakelink, .lockview {
 148     color: #3465a4;
 149     cursor: pointer;
 150 }
 151 .fakelink:hover {
 152     color: #729fcf;
 153 }
 154 input[type=submit] {
 155     margin-top: 10px;
 156     height: 22px;
 157     background-color: #555753;
 158     color: #eeeeec;
 159     -webkit-border-radius: 5px;
 160     -moz-border-radius: 5px;
 161     border-radius: 5px;
 162     border: 0;
 163 }
 164 .smalltext {
 165     font-size: 0.7em;
 166 }
 167 #panel {
 168         position: absolute;
 169         font-size: 0.8em;
 170         -webkit-border-radius: 5px;
 171         -moz-border-radius: 5px;
 172         border-radius: 5px;
 173         border: 1px solid #fff;
 174         background-color: #2e3436;
 175         color: #eeeeec;
 176         padding: 1em;
 177 }
 178 .pager {
 179         margin-top: 60px;
 180         display: block;
 181         clear: both;
 182         text-align: center;
 183 }
 184 .pager span {
 185     padding: 4px;
 186     margin: 4px;
 187 }
 188 .pager_current {
 189     background-color: #729fcf;
 190     color: #fff;
 191 }
 192
 193 /**
 194  * global
 195  */
 196 /* .tool .action */
 197 .action {
 198     float: right;
 199 }
 200
 201 /**
 202  *      login
 203  */
 204 #login-extra-links a {
 205     margin-right: 20px;
 206 }
 207
 208 /*********
 209 * nav
 210 *********/
 211 nav {
 212         height: 60px;
 213         display: block;
 214         background-color: #2e3436;
 215         color: #eeeeec;
 216         position: relative;
 217         padding: 20px 20px 10px 95px;
 218     margin-left: auto;
 219     margin-right: auto;
 220 }
 221 nav a {
 222         text-decoration: none;
 223         color: #eeeeec;
 224         border: 0px;
 225 }
 226 nav a:hover {
 227         text-decoration: none;
 228         color: #eeeeec;
 229     border: 0px;
 230 }
 231 nav #banner {
 232         display: block;
 233         position: absolute;
 234         left: 51px;
 235         top: 25px;
 236 }
 237 nav #banner #logo-text a {
 238         font-size: 40px;
 239         font-weight: bold;
 240         margin-left: 3px;
 241 }
 242 nav #user-menu {
 243     display: block;
 244     width: auto;
 245     float: right;
 246     margin: 3px 68px 0 0;
 247     position: relative;
 248         background-color: #555753;
 249     -webkit-border-radius: 5px;
 250     -moz-border-radius: 5px;
 251     border-radius: 5px;
 252     background: #555753 url("menu-user-pin.jpg") 98% center no-repeat;
 253     clear: both;
 254 }
 255 nav #user-menu-label {
 256         float: left;
 257         font-size: 12px;
 258     padding: 3px 20px 9px 5px;
 259     height: 10px;
 260 }
 261 ul#user-menu-popup {
 262         display: none;
 263         position: absolute;
 264         background-color: #555753;
 265         width: 100%;
 266     padding: 10px 0px;
 267     margin: 0px;
 268         top: 20px;
 269         left: 0;
 270         -webkit-border-radius: 0 0 5px 5px;
 271         -moz-border-radius: 0 0 5px 5px;
 272         border-radius: 0 0 5px 5px;
 273         z-index: 10000;
 274 }
 275 ul#user-menu-popup li {
 276         display: block;
 277 }
 278 ul#user-menu-popup li a {
 279         display: block;
 280         padding: 5px;
 281 }
 282 ul#user-menu-popup li a:hover {
 283         color: #2e3436;
 284         background-color: #eeeeec;
 285 }
 286 ul#user-menu-popup li a.nav-sep {
 287         border-top: 1px solid #eeeeec;
 288 }
 289 #nav-buttons {
 290     clear: both;
 291         list-style: none;
 292         padding: 0px;
 293 }
 294 #nav-buttons li {
 295         padding: 0;
 296 }
 297 nav .nav-link {
 298         float: right;
 299         display: block;
 300         width: 22px;
 301         height: 22px;
 302         overflow: hidden;
 303         margin: 0px 5px 5px;
 304         text-indent: 50px;
 305         background: transparent url(icons.png) 0 0 no-repeat;
 306 }
 307 #nav-apps-link {
 308         background-position: 0 -66px;
 309 }
 310 #nav-apps-link:hover {
 311         background-position: -22px -66px;
 312 }
 313 #nav-community-link {
 314     background-position: 0 -22px;
 315 }
 316 #nav-community-link:hover {
 317     background-position: -22px -22px;
 318 }
 319 #nav-contacts-link {
 320     background-position: 0 -22px;
 321 }
 322 #nav-contacts-link:hover {
 323     background-position: -22px -22px;
 324 }
 325 #nav-directory-link {
 326         background-position: -44px -154px;
 327 }
 328 #nav-directory-link:hover {
 329         background-position: -66px -154px;
 330 }
 331 #nav-help-link {
 332         background-position: 0 -110px;
 333 }
 334 #nav-help-link:hover {
 335         background-position: -22px -110px;
 336 }
 337 #nav-home-link {
 338     background-position: -44px -132px;
 339 }
 340 #nav-home-link:hover {
 341     background-position: -66px -132px;
 342 }
 343 #nav-intro-link {
 344         background-position: 0px -190px;
 345 }
 346 #nav-intro-link:hover {
 347         background-position: -44px -190px;
 348 }
 349 #nav-login-link {
 350         background-position: 0 -88px;
 351 }
 352 #nav-login-link:hover {
 353         background-position: -22px -88px;
 354 }
 355 #nav-logout-link {
 356         background-position: 0 -88px;
 357 }
 358 #nav-logout-link:hover {
 359         background-position: -22px -88px;
 360 }
 361 #nav-messages-link {
 362     background-position: -44px -88px;
 363 }
 364 #nav-messages-link:hover {
 365     background-position: -66px -88px;
 366 }
 367 #nav-notify-link, #nav-notifications-linkmenu {
 368     background-position: -44px -110px;
 369 }
 370 #nav-notify-link:hover {
 371     background-position: -66px -110px;
 372 }
 373 #nav-network-link {
 374     background-position: 0px -177px;
 375 }
 376 #nav-network-link:hover {
 377     background-position: -22px -177px;
 378 }
 379 #nav-search-link {
 380         background-position: 0 -44px;
 381 }
 382 #nav-search-link:hover {
 383         background-position: -22px -44px;
 384 }
 385 #profile-link,
 386 #profile-title,
 387 #wall-image-upload,
 388 #wall-file-upload,
 389 #profile-attach-wrapper,
 390 #profile-audio,
 391 #profile-link,
 392 #profile-location,
 393 #profile-nolocation,
 394 #profile-title,
 395 #jot-title,
 396 #profile-upload-wrapper,
 397 #profile-video,
 398 #profile-jot-submit,
 399 #wall-image-upload-div,
 400 #wall-file-upload-div,
 401 .icon, .hover, .focus, .pointer {
 402     cursor: pointer;
 403 }
 404 #notifications {
 405         height: 20px;
 406         width: 100%;
 407         position: absolute;
 408         top: -19px;
 409         left: 0;
 410 }
 411 /* popup notifications */
 412 div.jGrowl div.notice {
 413     background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 414     color: #ffffff;
 415     padding-left: 58px;
 416 }
 417 div.jGrowl div.info {
 418     background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 419     color: #ffffff;
 420     padding-left: 58px;
 421 }
 422 #nav-notifications-menu {
 423     margin: 30px 0 0 -45px;
 424     width: 300px;
 425     max-height: 400px;
 426     overflow: auto;
 427     font-size: 9pt;
 428 }
 429 #nav-notifications-menu .contactname {
 430     font-weight: bold;
 431     font-size: 0.9em;
 432 }
 433 #nav-notifications-menu img {
 434     float: left;
 435     margin-right: 5px;
 436 }
 437 #nav-notifications-menu .notif-when {
 438     font-size: 0.8em;
 439     display: block;
 440 }
 441 #nav-notifications-menu li {
 442     padding: 7px 0px 7px 10px;
 443     word-wrap: normal;
 444     border-bottom: 1px solid #000;
 445 }
 446 #nav-notifications-menu li:hover {
 447     color: black;
 448 }
 449 #nav-notifications-menu a:hover {
 450     color: black;
 451     text-decoration: underline;
 452 }
 453 nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 454   background-image: url("../../../images/icons/22/notify_on.png");
 455 }
 456 .show {
 457     display: block;
 458 }
 459 #nav-floater {
 460     position: fixed;
 461     top: 20px;
 462     right: 1%;
 463     padding: 5px;
 464     background: #2e3436;
 465     border-radius: 5px;
 466     z-index: 100;
 467 }
 468 .floaterflip {
 469         display: block;
 470     position: fixed;
 471     z-index: 110;
 472     top: 53px;
 473     right: 19px;
 474         width: 22px;
 475         height: 22px;
 476         overflow: hidden;
 477         margin: 0px;
 478         background: transparent url(icons.png) -190px -60px no-repeat;
 479 }
 480 .nav-ajax-update, .nav-ajax-left {
 481         width: 30px;
 482         height: 19px;
 483         background: transparent url(notifications.png) 0 0 no-repeat;
 484         color: #222;
 485         font-weight: bold;
 486         font-size: 0.8em;
 487         padding-top: 0.2em;
 488         text-align: center;
 489         float: left;
 490         margin: 0 -1px 0 3px;
 491         display: block;
 492         visibility: hidden;
 493 }
 494 .nav-ajax-update.show, .nav-ajax-left.show {
 495     visibility: visible;
 496 }
 497 #net-update {
 498         background-position: 0px 0px;
 499 }
 500 #mail-update {
 501         background-position: -30px 0;
 502 }
 503 #notify-update {
 504         background-position: -60px 0px;
 505 }
 506 #home-update {
 507         background-position: -90px 0px;
 508 }
 509 #intro-update {
 510         background-position: -120px 0px;
 511 }
 512 #lang-select-icon {
 513         cursor: pointer;
 514         position: absolute;
 515         left: 0;
 516         top: 0;
 517 }
 518 #language-selector {
 519     position: absolute;
 520     top: 0;
 521     left: 16px;
 522 }
 523 .menu-popup {
 524     position: absolute;
 525     display: none;
 526     width: 11em;
 527     background: #ffffff;
 528     color: #2d2d2d;
 529     margin: 0px;
 530     padding: 0px;
 531     list-style: none;
 532     border: 3px solid #364e59;
 533     z-index: 100000;
 534     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 535     -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 536     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 537 }
 538 .menu-popup a {
 539     display: block;
 540     color: #2d2d2d;
 541     padding: 5px 10px;
 542     text-decoration: none;
 543 }
 544 .menu-popup a:hover {
 545     background-color: #bdcdd4;
 546 }
 547 .menu-popup .menu-sep {
 548     border-top: 1px solid #9eabb0;
 549 }
 550 .menu-popup li {
 551     float: none;
 552     overflow: auto;
 553     height: auto;
 554     display: block;
 555 }
 556 .menu-popup li img {
 557     float: left;
 558     width: 16px;
 559     height: 16px;
 560     padding-right: 5px;
 561 }
 562 .menu-popup .empty {
 563     padding: 5px;
 564     text-align: center;
 565     color: #9eabb0;
 566 }
 567 .notif-item {
 568     font-size: small;
 569 }
 570 .notif-item a {
 571     vertical-align: middle;
 572 }
 573 .notif-image {
 574     width: 32px;
 575     height: 32px;
 576     padding: 7px 7px 0px 0px;
 577 }
 578 .notify-seen {
 579     background: #ddd;
 580 }
 581
 582 /** sysmsg **/
 583 #sysmsg_info {
 584         position:fixed;
 585         bottom:0;
 586         -moz-box-shadow:0 0 5px #888;
 587         -webkit-box-shadow:0 0 5px #888;
 588         box-shadow:0 0 5px #888;
 589     padding: 10px;
 590         background-color:#fcaf3e;
 591         border:2px solid #f8911b;
 592         border-bottom:0;
 593         padding-bottom: 50px;
 594         z-index: 1000;
 595 }
 596 #sysmsg {
 597         position: fixed;
 598         bottom: 0;
 599         -moz-box-shadow: 0 0 5px #888;
 600         -webkit-box-shadow: 0 0 5px #888;
 601         box-shadow: 0 0 5px #888;
 602     padding: 10px;
 603         background-color: #fcaf3e;
 604         border: 2px solid #f8911b;
 605         border-bottom: 0;
 606         padding-bottom: 50px;
 607         z-index: 1000;
 608 }
 609 #sysmsg_info br,
 610 #sysmsg br {
 611         display: block;
 612         margin: 2px 0px;
 613         border-top: 1px solid #ccccce;
 614 }
 615
 616
 617 /**
 618 * aside
 619 **/
 620 aside {
 621     position: absolute;
 622     right: 15px;
 623     width: 245px;
 624         padding-top: 15px;
 625     font-size: smaller;
 626 }
 627 .vcard .fn {
 628         font-size: 1.7em;
 629         font-weight: bold;
 630         border-bottom: 1px solid #729fcf;
 631         padding-bottom: 3px;
 632 }
 633 .vcard #profile-photo-wrapper {
 634         margin: 20px;
 635 }
 636 .vcard #profile-photo-wrapper img {
 637         box-shadow: 3px 3px 10px 0;
 638 }
 639 aside h4 {
 640         font-size: 1.2em;
 641 }
 642 aside #viewcontacts {
 643         text-align: right;
 644 }
 645 .aprofile dt {
 646     box-shadow: 1px 1px 5px 0;
 647     color: #666666;
 648     margin: 15px 0 5px;
 649     padding-left: 5px;
 650 }
 651 #profile-extra-links ul {
 652         margin-left: 0px;
 653     padding-left: 0px;
 654     list-style: none;
 655 }
 656 #dfrn-request-link {
 657         background:#3465A4 url(connect.png) no-repeat 95% center;
 658         border-radius:5px 5px 5px 5px;
 659         color:#fff;
 660         display:block;
 661         font-size:1.2em;
 662         padding:.2em .5em;
 663 }
 664 #netsearch-box {
 665         margin: 30px 0px;
 666 }
 667
 668
 669 /**
 670 * contacts block
 671 */
 672 .contact-block-div {
 673     width: 50px;
 674     height: 50px;
 675     float: left;
 676 }
 677 .contact-block-textdiv {
 678     width: 150px;
 679     height: 34px;
 680     float: left;
 681 }
 682 #contact-block-end {
 683     clear: both;
 684 }
 685
 686
 687 /**
 688  * jot
 689  **/
 690 #jot {
 691   /*width: 785px;*/
 692   margin: 10px 0 20px 0px;
 693   width: 100%;
 694 }
 695 #jot #jot-tools {
 696   margin: 0px;
 697   padding: 0px;
 698   height: 35px;
 699   overflow: none;
 700   width: 100%;
 701   /*background-color: #0e232e;*/
 702   /*border-bottom: 2px solid #9eabb0;*/
 703 }
 704 #jot #jot-tools span {
 705     float: left;
 706     margin: 10px 20px 2px 0px;
 707 }
 708 #jot #jot-tools span a {
 709     display: block;
 710     /*color: #cccccc;    */
 711     /*width: 100%;       */
 712     /*height: 40px;      */
 713     /*text-align: center;*/
 714     /*line-height: 40px; */
 715     /*overflow: hidden;*/
 716 }
 717 /*#jot #jot-tools li:hover {*/
 718     /*background-color: #364e59;*/
 719 /*}*/
 720 #jot #jot-tools .perms {
 721     float: right;
 722     width: 40px;
 723 }
 724 /*#jot #jot-tools .perms a.unlock {*/
 725 /*    width: 30px;                    */
 726 /*    border-left: 10px solid #cccccc;*/
 727 /*    background-color: #cccccc;      */
 728 /*}*/
 729 /*#jot #jot-tools .perms a.lock {*/
 730 /*    width: 30px;                    */
 731 /*    border-left: 10px solid #666666;*/
 732 /*    background-color: #666666;      */
 733 /*}*/
 734 /*#jot #jot-tools li.submit {            */
 735 /*    float: right;                      */
 736 /*    background-color: #cccccc;         */
 737 /*    border-bottom: 2px solid #cccccc;  */
 738 /*    border-right: 1px solid #666666;   */
 739 /*    border-left: 1px solid #666666;    */
 740 /*}                                      */
 741 /*#jot #jot-tools li.submit input {      */
 742 /*    border: 0px;                       */
 743 /*    margin: 0px;                       */
 744 /*    padding: 0px;                      */
 745 /*    background-color: #cccccc;         */
 746 /*    color: #666666;                    */
 747 /*    width: 80px;                       */
 748 /*    height: 40px;                      */
 749 /*    line-height: 40px;                 */
 750 /*}                                      */
 751 /*#jot #jot-tools li.submit input:hover {*/
 752 /*    background-color: #bdcdd4;         */
 753 /*    color: #666666;                    */
 754 /*}                                      */
 755 #jot #jot-tools li.loading {
 756     float: right;
 757     background-color: #ffffff;
 758     width: 20px;
 759     vertical-align: center;
 760     text-align: center;
 761     border-top: 2px solid #9eabb0;
 762     height: 38px;
 763 }
 764 #jot #jot-tools li.loading img {
 765     margin-top: 10px;
 766 }
 767 #jot #jot-title {
 768         border: 1px solid #ccc;
 769     margin: 0 0 5px;
 770     height: 20px;
 771     width: 90%;
 772     font-weight: bold;
 773     border-radius: 5px;
 774         vertical-align: middle;
 775 }
 776 #jot #character-counter {
 777         width: 6%;
 778         float: right;
 779         text-align: right;
 780         height: 15px;
 781         line-height: 20px;
 782         padding: 2px 20px 5px 0;
 783 }
 784 #profile-jot-text_tbl {
 785         margin-bottom: 10px;
 786 }
 787 #profile-jot-text_ifr {
 788         width:99.900002% !important;
 789 }
 790 #profile-attach-wrapper,
 791 #profile-audio-wrapper,
 792 #profile-link-wrapper,
 793 #profile-location-wrapper,
 794 #profile-nolocation-wrapper,
 795 #profile-title-wrapper,
 796 #profile-upload-wrapper,
 797 #profile-video-wrapper {
 798     float: left;
 799         margin: 0 20px 0 0;
 800 }
 801 #profile-rotator-wrapper {
 802         float: right;
 803 }
 804 #profile-jot-tools-end,
 805 #profile-jot-banner-end {
 806         clear: both;
 807 }
 808 #profile-jot-email-wrapper {
 809         margin:10px 10% 0;
 810         border:1px solid #555753;
 811         border-bottom:0;
 812 }
 813 #profile-jot-email-label {
 814         background-color:#555753;
 815         color:#ccccce;
 816         padding:5px;
 817 }
 818 #profile-jot-email {
 819         width:90%;
 820         margin:5px;
 821 }
 822 #profile-jot-networks {
 823         margin: 0 10%;
 824         border: 1px solid #555753;
 825         border-top: 0;
 826         border-bottom: 0;
 827         padding: 5px;
 828 }
 829 #jot-preview-link {
 830     margin: 0 0 0 10px;
 831     border: 0;
 832     text-decoration: none;
 833         float: right;
 834 }
 835 .icon-text-preview {
 836         margin: 0 0 -18px 0;
 837         display: block;
 838     width: 20px;
 839     height: 20px;
 840     background: url(icons.png) no-repeat -128px -40px;
 841     border: 0;
 842     text-decoration: none;
 843         float: right;
 844 }
 845 #profile-jot-perms {
 846         float: right;
 847     background-color: #555753;
 848     height: 22px;
 849     width: 20px;
 850     -webkit-border-radius: 5px 0px 0px 5px;
 851     -moz-border-radius: 5px 0px 0px 5px;
 852     border-radius: 5px 0px 0px 5px;
 853     overflow: hidden;
 854     border: 0px;
 855     margin: 0 -4px 0 10px;
 856 }
 857 #profile-jot-plugin-wrapper {
 858         width: 1px;
 859         margin: 10px 0 0 0;
 860         float: right;
 861 }
 862 #profile-jot-submit-wrapper {
 863         float: right;
 864         width: 100%;
 865         list-style: none;
 866         margin: 10px 0 0 0;
 867         padding: 0;
 868 }
 869 #profile-jot-submit {
 870         height: 22px;
 871         background-color: #555753;
 872         color: #eeeeec;
 873         -webkit-border-radius: 0 5px 5px 0;
 874         -moz-border-radius: 0 5px 5px 0;
 875         border-radius: 0 5px 5px 0;
 876         border: 0;
 877         margin: 0;
 878         float: right;
 879 }
 880 #jot-perms-icons {
 881         background-color: #555753;
 882         height: 22px;
 883         width: 20px;
 884         -webkit-border-radius: 0 5px 5px 0;
 885         -moz-border-radius: 0 5px 5px 0;
 886         border-radius: 0 5px 5px 0;
 887         overflow: hidden;
 888         border: 0;
 889         margin: 0 0 0 94.4%;
 890 }
 891 #profile-jot-acl-wrapper {
 892         margin: 0 10px;
 893         border: 1px solid #555753;
 894         border-top: 0;
 895         display: block !important;
 896 }
 897 #group_allow_wrapper,
 898 #group_deny_wrapper,
 899 #acl-permit-outer-wrapper {
 900         width:47%;
 901         float:left;
 902 }
 903 #contact_allow_wrapper,
 904 #contact_deny_wrapper,
 905 #acl-deny-outer-wrapper {
 906         width:47%;
 907         float:right;
 908 }
 909 #acl-permit-text {
 910         background-color: #555753;
 911         color: #ccccce;
 912         padding: 5px;
 913         float: left;
 914 }
 915 #jot-public {
 916         background-color: #555753;
 917         color: #ff0000;
 918         padding: 5px;
 919         float: left;
 920 }
 921 #acl-deny-text {
 922         background-color: #555753;
 923         color: #ccccce;
 924         padding: 5px;
 925         float: left;
 926 }
 927 #acl-permit-text-end,
 928 #acl-deny-text-end {
 929         clear: both;
 930 }
 931 #jot-title-desc {
 932         color: #cccccc;
 933 }
 934 #profile-jot-desc {
 935         color: #a00;
 936 }
 937 #jot-title-wrapper {
 938         margin-bottom: 5px;
 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: 15px;
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: 0 0 10px 5px;
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         margin: 0 20px -18px 0;
1739     float: right;
1740 }
1741 .profile-listing {
1742     float: left;
1743     margin: 20px 20px 0px 0px;
1744 }
1745
1746 #profile-edit-links ul {
1747     margin: 20px 0;
1748     padding: 0;
1749     list-style: none;
1750 }
1751
1752 #register-sitename {
1753     display: inline;
1754     font-weight: bold;
1755 }
1756
1757 /**
1758  *      contacts selector
1759  */
1760 .group-delete-wrapper {
1761         margin: -31px 122px 0 0;
1762     float: right;
1763 }
1764
1765 #group-edit-submit-wrapper {
1766     margin: 0 0 10px 0;
1767     display: inline;
1768 }
1769 #group-edit-desc {
1770     margin: 10px 0px;
1771 }
1772 #group-members,
1773 #prof-members {
1774     height:200px;
1775     overflow:auto;
1776     border:1px solid #555753;
1777     -webkit-border-radius:5px 5px 0 0;
1778     -moz-border-radius:5px 5px 0 0;
1779     border-radius:5px 5px 0 0;
1780 }
1781 #group-all-contacts,
1782 #prof-all-contacts {
1783     height:200px;
1784     overflow:auto;
1785     border:1px solid #555753;
1786     -webkit-border-radius:0 0 5px 5px;
1787     -moz-border-radius:0 0 5px 5px;
1788     border-radius:0 0 5px 5px;
1789 }
1790 #group-members h3,
1791 #group-all-contacts h3,
1792 #prof-members h3,
1793 #prof-all-contacts h3 {
1794     color:#eeeeec;
1795     background-color:#555753;
1796     margin:0;
1797     padding:5px;
1798 }
1799 #group-separator,
1800 #prof-separator {
1801     display: none;
1802 }
1803
1804 /**
1805  * profile
1806  */
1807 #cropimage-wrapper {
1808     float:left;
1809 }
1810 #crop-image-form {
1811     clear:both;
1812 }
1813
1814 /**
1815  * events
1816  **/
1817 .clear { clear: both; }
1818 .eventcal {
1819     float:left;
1820     font-size:20px;
1821 }
1822 .vevent {
1823     border:1px solid #ccc;
1824 }
1825 .vevent .event-description, .vevent .event-location {
1826         margin-left: 10px;
1827         margin-right: 10px;
1828 }
1829 .vevent .event-start {
1830         margin-left: 10px;
1831         margin-right: 10px;
1832 }
1833
1834 #new-event-link {
1835         margin-bottom: 10px;
1836 }
1837 .edit-event-link, .plink-event-link {
1838         float: left;
1839         margin-top: 4px;
1840         margin-right: 4px;
1841         margin-bottom: 15px;
1842 }
1843 .event-description:before {
1844         content: url('../../../images/calendar.png');
1845         margin-right: 15px;
1846 }
1847 .event-start, .event-end {
1848         margin-left: 10px;
1849         width: 330px;
1850 }
1851 .event-start .dtstart, .event-end .dtend {
1852         float: right;
1853 }
1854 .event-list-date {
1855         margin-bottom: 10px;
1856 }
1857 .prevcal, .nextcal {
1858         float: left;
1859         margin-left: 32px;
1860         margin-right: 32px;
1861         margin-top: 64px;
1862 }
1863 .event-calendar-end {
1864         clear: both;
1865 }
1866 .calendar {
1867     font-family: monospace;
1868 }
1869 .today {
1870         font-weight: bold;
1871         color: #FF0000;
1872 }
1873 #event-start-text,
1874 #event-finish-text {
1875         margin-top: 10px;
1876         margin-bottom: 5px;
1877 }
1878 #event-nofinish-checkbox,
1879 #event-nofinish-text,
1880 #event-adjust-checkbox,
1881 #event-adjust-text,
1882 #event-share-checkbox {
1883     float:left;
1884 }
1885 #event-datetime-break {
1886         margin-bottom: 10px;
1887 }
1888 #event-nofinish-break,
1889 #event-adjust-break,
1890 #event-share-break {
1891         clear: both;
1892 }
1893 #event-desc-text,
1894 #event-location-text {
1895         margin-top: 10px;
1896         margin-bottom: 5px;
1897 }
1898 #event-submit {
1899         margin-top: 10px;
1900 }
1901 .body-tag {
1902         margin: 10px 0;
1903         opacity: 0.5;
1904         filter:alpha(opacity=50);
1905 }
1906 .body-tag:hover {
1907         opacity: 1.0 !important;
1908         filter:alpha(opacity=100) !important;
1909 }
1910 .item-select {
1911         opacity: 0.1;
1912         filter:alpha(opacity=10);
1913         float: right;
1914         margin-right: 10px;
1915
1916 }
1917 .item-select:hover, .checkeditem {
1918         opacity: 1;
1919         filter:alpha(opacity=100);
1920 }
1921 #item-delete-selected {
1922         margin-top: 30px;
1923 }
1924 /* was tired of having no way of moving it around, so
1925  * here's a little 'hook' to do so */
1926 .delete-checked {
1927         position: absolute;
1928         left: 35px;
1929         margin-top: 20px;
1930 }
1931 #item-delete-selected-end {
1932         clear: both;
1933 }
1934 #item-delete-selected-icon, #item-delete-selected-desc {
1935         float: left;
1936         margin-right: 5px;
1937 }
1938 #item-delete-selected-desc:hover {
1939         text-decoration: underline;
1940 }
1941
1942
1943 /**
1944  *      directory
1945  */
1946 .directory-item {
1947     float: left;
1948     margin: 50px 50px 0px 0px;
1949 }
1950
1951
1952 /**
1953  * sidebar
1954  */
1955 #group-sidebar {
1956     margin-bottom: 10px;
1957 }
1958 .group-selected, .nets-selected {
1959     padding: 3px;
1960     border: 1px solid #CCCCCC;
1961     background: #F8F8F8;
1962     font-weight: bold;
1963 }
1964 .groupsideedit {
1965     margin-right: 10px;
1966 }
1967 #sidebar-group-ul {
1968     padding-left: 0;
1969 }
1970 #sidebar-group-list {
1971     margin: 0 0 5px 0;
1972 }
1973 #sidebar-group-list ul {
1974     list-style-type: none;
1975     list-style-position: inside;
1976 }
1977 #sidebar-group-list li {
1978     margin-top: 10px;
1979 }
1980 #sidebar-group-list .icon {
1981     display: inline-block;
1982     height: 12px;
1983     width: 12px;
1984 }
1985 #sidebar-new-group {
1986     margin: auto;
1987     display: inline-block;
1988     color: #efefef;
1989     text-decoration: none;
1990     text-align: center;
1991 }
1992 #peoplefind-sidebar form {
1993         margin-bottom: 10px;
1994 }
1995 #sidebar-new-group:hover {
1996     /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
1997     /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
1998     /*background-color: #b20202;*/
1999 }
2000
2001 #sidebar-new-group:active {
2002     position: relative;
2003     top: 1px;
2004 }
2005 #side-peoplefind-url {
2006     background-color: #e5e0cf;
2007     color: #666;
2008         border: 1px 666 solid;
2009         margin-right: 3px;
2010         width: 75%;
2011 }
2012 #side-peoplefind-url:hover, #side-peoplefind-url:focus {
2013     background-color: #efefef;
2014     color: #222;
2015         border: 1px 333 solid;
2016 }
2017 .nets-ul {
2018     list-style-type: none;
2019     padding-left: 0px;
2020 }
2021 .nets-ul li {
2022     margin: 10px 0 0;
2023 }
2024
2025 .nets-link {
2026     margin-left: 0px;
2027 }
2028 .nets-all {
2029     margin-left: 0px;
2030 }
2031 #netsearch-box {
2032     margin-top: 20px;
2033     width: 150px;
2034 }
2035 #netsearch-box #search-submit {
2036     margin: 5px 0px 0px 0px;
2037 }
2038
2039 /**
2040  * ADMIN
2041  */
2042 #pending-update {
2043     float:right;
2044     color: #fff;
2045     font-weight: bold;
2046     background-color: #ff0000;
2047     padding: 0 .3em;
2048 }
2049 .admin.linklist {
2050     border: 0; padding: 0;
2051 }
2052 .admin.link {
2053     list-style-position: inside;
2054 }
2055 #adminpage dl {
2056     clear:left;
2057     margin-bottom: 2px;
2058     padding-bottom: 2px;
2059     border-bottom: 1px solid #000;
2060 }
2061 #adminpage dt {
2062     width: 200px;
2063     float: left;
2064     font-weight: bold;
2065 }
2066 #adminpage dd {
2067         margin-left: 200px;
2068 }
2069 #adminpage h3 {
2070     border-bottom:1px solid #ccc;
2071 }
2072
2073 #adminpage .submit {
2074         clear:left;
2075 }
2076
2077 #adminpage #pluginslist {
2078     margin: 0;
2079     padding: 0;
2080 }
2081 #adminpage .plugin {
2082     list-style: none;
2083     display: block;
2084     border: 1px solid #888;
2085     padding: 1em;
2086     margin-bottom: 5px;
2087     clear: left;
2088 }
2089 #adminpage .toggleplugin {
2090         float:left;
2091         margin-right: 1em;
2092 }
2093
2094 #adminpage table {
2095     width: 100%;
2096     border-bottom: 1px solid #000;
2097     margin: 5px 0;
2098 }
2099 #adminpage table th {
2100     text-align: left;
2101 }
2102 #adminpage td .icon {
2103     float: left;
2104 }
2105 #adminpage table#users img {
2106     width: 16px; height: 16px;
2107 }
2108 #adminpage table tr:hover {
2109     background-color:#bbc7d7;
2110 }
2111 #adminpage .selectall {
2112     text-align: right;
2113 }
2114
2115 /**
2116  * Form fields
2117  */
2118 .field {
2119         /*margin-bottom: 10px;*/
2120         /*padding-bottom: 10px;*/
2121     overflow: auto;
2122     width: 100%;
2123 }
2124 .field label, label {
2125     float: left;
2126     width: 275px;
2127         display: block;
2128         font-size: 1.077em;
2129         /*font-weight: bold;*/
2130         margin: 0 10px 0.5em 0;
2131         border: 1px #999 solid;
2132         padding: 5px;
2133         background: #eee;
2134         vertical-align: middle;
2135 }
2136 .field input, input[type="text"] {
2137         width: 250px;
2138         height: 25px;
2139         border: 1px #999 solid;
2140 }
2141 .field textarea {
2142     width: 80%;
2143     height: 100px;
2144 }
2145 .field_help {
2146     display: block;
2147     margin-left: 297px;
2148     color: #666;
2149 }
2150 .field .onoff {
2151     float: left;
2152     width: 80px;
2153 }
2154 .field .onoff a {
2155     display: block;
2156     border: 1px solid #666;
2157     padding: 3px 6px 4px 10px;
2158     height: 16px;
2159     text-decoration: none;
2160 }
2161 .field .onoff .on {
2162         background: url("../../../images/onoff.jpg") no-repeat 42px 1px #999;
2163     color: #111;
2164     text-align: left;
2165 }
2166 .field .onoff .off {
2167         background: url("../../../images/onoff.jpg") no-repeat 2px 1px #ccc;
2168     color: #333;
2169     text-align: right;
2170 }
2171 .hidden {
2172     display:none !important;
2173 }
2174 .field.radio .field_help {
2175     margin-left: 0;
2176 }
2177
2178
2179 /*
2180  * UPDATE
2181  */
2182 .popup {
2183         width: 100%;
2184     height: 100%;
2185         top:0px;
2186     left:0px;
2187         position: absolute;
2188         display: none;
2189 }
2190 .popup .background {
2191         background-color: rgba(0,0,0,128);
2192         opacity: 0.5;
2193         width: 100%;
2194     height: 100%;
2195         position: absolute;
2196         top:0px;
2197     left:0px;
2198 }
2199 .popup .panel {
2200         top: 25%;
2201     left: 25%;
2202     width: 50%;
2203     height: 50%;
2204         padding: 1em;
2205         position: absolute;
2206         border: 4px solid #000000;
2207         background-color: #FFFFFF;
2208 }
2209 #panel {
2210     z-index: 100;
2211 }
2212 .grey {
2213     color: grey;
2214 }
2215 .orange {
2216     color: orange;
2217 }
2218 .red {
2219     color: red;
2220 }
2221 .popup .panel .panel_text {
2222     display: block;
2223     overflow: auto;
2224     height: 80%;
2225 }
2226 .popup .panel .panel_in {
2227     width: 100%;
2228     height: 100%;
2229     position: relative;
2230 }
2231 .popup .panel .panel_actions {
2232     width: 100%;
2233     bottom: 4px;
2234     left: 0px;
2235     position: absolute;
2236 }
2237 .panel_text .progress {
2238     width: 50%;
2239     overflow: hidden;
2240     height: auto;
2241     border: 1px solid #cccccc;
2242     margin-bottom: 5px;
2243 }
2244 .panel_text .progress span {
2245     float: right;
2246     display: block;
2247     width: 25%;
2248     background-color: #eeeeee;
2249     text-align: right;
2250 }
2251
2252 /**
2253  * OAuth
2254  */
2255 .oauthapp {
2256         height: auto;
2257     overflow: auto;
2258         border-bottom: 2px solid #cccccc;
2259         padding-bottom: 1em;
2260         margin-bottom: 1em;
2261 }
2262 .oauthapp img {
2263         float: left;
2264         width: 48px; height: 48px;
2265         margin: 10px;
2266 }
2267 .oauthapp img.noicon {
2268         background-image: url("../../../images/icons/48/plugin.png");
2269         background-position: center center;
2270         background-repeat: no-repeat;
2271 }
2272 .oauthapp a {
2273         float: left;
2274 }
2275
2276
2277 /**
2278  * ICONS
2279  */
2280 .iconspacer {
2281         display: block;
2282     width: 16px;
2283     height: 16px;
2284 }
2285 .icon {
2286     display: block;
2287     width: 20px;
2288     height: 20px;
2289     background: url(icons.png) no-repeat;
2290     border: 0;
2291     text-decoration: none;
2292 }
2293 .icon:hover {
2294     border: 0;
2295     text-decoration: none;
2296 }
2297 .icon.drop,
2298 .icon.drophide, .icon.delete {
2299     float: left;
2300 }
2301 /*.icon.s22 {
2302         display: block;
2303         background: url(icons.png) no-repeat;
2304         width: 22px;
2305         height: 22px;
2306 }*/
2307 .icon.s22.delete {
2308         display: block;
2309         background-position: -110px 0;
2310 }
2311 .icon.s22.text {
2312         padding: 10px 0px 0px 25px;
2313         width: 200px;
2314 }
2315 .icon.text {
2316     text-indent: 0px;
2317 }
2318 .icon.s16 {
2319     min-width: 16px;
2320     height: 16px;
2321 }
2322 .s16 .add {
2323     background: url("../../../images/icons/16/add.png") no-repeat;
2324 }
2325 .add {
2326     margin: 0px 5px;
2327 }
2328 .article {
2329         background-position: -50px 0;
2330 }
2331 .audio {
2332         background-position: -70px 0;
2333 }
2334 .block {
2335         background-position: -90px 0px;
2336 }
2337 .drop, .delete {
2338         background-position: -110px 0;
2339 }
2340 .drophide {
2341         background-position: -130px 0;
2342 }
2343 .edit {
2344         background-position: -150px 0;
2345 }
2346 .camera {
2347         background-position: -170px 0;
2348 }
2349 .dislike {
2350         background-position: -190px 0;
2351 }
2352 .like {
2353         background-position: -211px 0;
2354 }
2355 .link {
2356         background-position: -230px 0;
2357 }
2358 .globe, .location {
2359         background-position: -50px -20px;
2360 }
2361 .noglobe, .nolocation {
2362         background-position: -70px -20px;
2363 }
2364 .no {
2365         background-position: -90px -20px;
2366 }
2367 .pause {
2368         background-position: -110px -20px;
2369 }
2370 .play {
2371         background-position: -130px -20px;
2372 }
2373 .pencil {
2374         background-position: -151px -18px;
2375 }
2376 .small-pencil {
2377         background-position: -170px -20px;
2378 }
2379 .recycle {
2380         background-position: -190px -20px;
2381 }
2382 .remote-link {
2383         background-position: -210px -20px;
2384 }
2385 .share {
2386         background-position: -230px -20px;
2387 }
2388 .tools {
2389         background-position: -50px -40px;
2390 }
2391 .lock {
2392         background-position: -70px -40px;
2393 }
2394 .unlock {
2395         background-position: -90px -40px;
2396 }
2397 .video {
2398         background-position: -110px -40px;
2399 }
2400 .attach {
2401         background-position: -190px -40px;
2402 }
2403 .language {
2404         background-position: -210px -40px;
2405 }
2406 .starred {
2407         background-position: -130px -60px;
2408 }
2409 .unstarred {
2410         background-position: -150px -60px;
2411 }
2412 .tagged {
2413         background-position: -170px -60px;
2414 }
2415 .on {
2416         background-position: -50px  -60px;
2417 }
2418 .off {
2419         background-position: -70px  -60px;
2420 }
2421 .prev {
2422         background-position: -90px  -60px;
2423 }
2424 .next {
2425         background-position: -110px  -60px;
2426 }
2427 .icon.dim {
2428         opacity: 0.3;
2429         filter: alpha(opacity=30);
2430 }
2431 #pause {
2432         position: fixed;
2433         bottom: 5px;
2434         right: 5px;
2435 }
2436 .border, .border:hover {
2437         border: 1px solid #babdb6;
2438     -webkit-border-radius: 3px;
2439     -moz-border-radius: 3px;
2440     border-radius: 3px;
2441 }
2442 .attachtype {
2443     display: block;
2444     width: 20px;
2445     height: 23px;
2446     background-image: url(../../../images/content-types.png);
2447 }
2448 .type-video {
2449     background-position: 0px 0px;
2450 }
2451 .type-image {
2452     background-position: -20px 0;
2453 }
2454 .type-audio {
2455     background-position: -40px 0;
2456 }
2457 .type-text {
2458     background-position: -60px 0px;
2459 }
2460 .type-unkn {
2461     background-position: -80px 0;
2462 }
2463
2464
2465 /**
2466  *      footer
2467  */
2468 .cc-license {
2469     margin-top: 100px;
2470     font-size: 0.7em;
2471 }
2472 footer {
2473     display: block;
2474     margin: 50px 20%;
2475     clear: both;
2476 }
2477 #profile-jot-text {
2478     height: 20px;
2479     color: #666;
2480     border: 1px solid #ccc;
2481     border-radius: 5px;
2482     width: 99.5%;
2483 }
2484
2485
2486 /** acl **/
2487 #photo-edit-perms-select,
2488 #photos-upload-permissions-wrapper,
2489 #profile-jot-acl-wrapper {
2490     display: block !important;
2491 }
2492 #acl-wrapper {
2493     width: 690px;
2494     float: left;
2495 }
2496 #acl-search {
2497     float: right;
2498     background: #fff url("../../../images/search_18.png") no-repeat right center;
2499     padding-right: 20px;
2500 }
2501 #acl-showall {
2502     float:left;
2503     display:block;
2504     width:auto;
2505     height:18px;
2506     background-color:#CCC;
2507     background-image:url("../../../images/show_all_off.png");
2508     background-position:7px 7px;
2509     background-repeat:no-repeat;
2510     padding:7px 10px 7px 30px;
2511     -webkit-border-radius:5px;
2512     -moz-border-radius:5px;
2513     border-radius:5px;
2514     color:#999;
2515 }
2516 #acl-showall.selected {
2517     color:#000;
2518     background-color:#F90;
2519     background-image:url(../../../images/show_all_on.png);
2520 }
2521 #acl-list {
2522     height:210px;
2523     border:1px solid #ccc;
2524     clear:both;
2525     margin-top:30px;
2526     overflow:auto;
2527 }
2528 #acl-list-content {
2529 }
2530 .acl-list-item {
2531     display:block;
2532     width:150px;
2533     height:30px;
2534     border:1px solid #ccc;
2535     margin:5px;
2536     float:left;
2537 }
2538 .acl-list-item img {
2539     width:22px;
2540     height:22px;
2541     float:left;
2542     margin:4px;
2543 }
2544 .acl-list-item p {
2545     height: 12px;
2546     font-size: 10px;
2547     margin: 0;
2548     padding: 2px 0 1px;
2549 }
2550 .acl-list-item a {
2551     font-size:8px;
2552     display:block;
2553     width:40px;
2554     height:10px;
2555     float:left;
2556     color:#999;
2557     background-color:#CCC;
2558     background-position:3px 3px;
2559     background-repeat:no-repeat;
2560     margin-right:5px;
2561     -webkit-border-radius:2px;
2562     -moz-border-radius:2px;
2563     border-radius:2px;
2564     padding-left:15px;
2565 }
2566 #acl-wrapper a:hover {
2567     text-decoration:none;
2568     color:#000;
2569 }
2570 .acl-button-show {
2571     background-image:url('../../../images/show_off.png');
2572 }
2573 .acl-button-hide {
2574     background-image:url('../../../images/hide_off.png');
2575 }
2576 .acl-button-show.selected {
2577     color:#000;
2578     background-color:#9ade00;
2579     background-image:url(../../../images/show_on.png);
2580 }
2581 .acl-button-hide.selected {
2582     color:#000;
2583     background-color:#ff4141;
2584     background-image:url(../../../images/hide_on.png);
2585 }
2586 .acl-list-item.groupshow {
2587     border-color:#9ade00;
2588 }
2589 .acl-list-item.grouphide {
2590     border-color:#ff4141;
2591 }
2592 /** /acl **/
2593
2594
2595 /* autocomplete popup */
2596 .acpopup {
2597         max-height: 150px;
2598         background-color: #555753;
2599         color: #fff;
2600         overflow: auto;
2601         z-index: 100000;
2602         border: 1px solid #cccccc;
2603 }
2604 .acpopupitem {
2605         background-color: #555753;
2606     padding: 4px;
2607         clear: left;
2608 }
2609 .acpopupitem img {
2610         float: left;
2611         margin-right: 4px;
2612 }
2613 .acpopupitem.selected {
2614         color: #2e3436;
2615     background-color: #eeeeec;
2616 }
2617 .qcomment-wrapper {
2618     padding: 0px;
2619     margin: 2px;
2620     list-style-type: none;
2621 }
2622 .qcomment, .qcomment:hover {
2623     display: inline;
2624     padding: 5px;
2625     margin: 5px;
2626 }
2627 .qcomment {
2628         opacity: 0.5;
2629         filter:alpha(opacity=50);
2630 }
2631 .qcomment:hover {
2632         opacity: 1.0;
2633         filter:alpha(opacity=100);
2634 }
2635 #network-star-link {
2636     margin-top: 10px;
2637 }
2638 .network-star {
2639     float: left;
2640     margin-right: 5px;
2641 }
2642 .network-star.icon.starred {
2643     display: inline-block;
2644 }
2645
2646
2647 @media handheld {
2648     body {
2649         font-size: 15pt;
2650     }
2651 }
2652