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