view/theme/dispy-dark/style.css

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