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