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