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