view/theme/dispy/light/style.less

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