view/theme/dispy/style.css

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