view/theme/dispy-dark/style.css

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