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