view/theme/dispy/light/style.less

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