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