view/theme/dispy/light/style.less

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