view/theme/dispy/dark/style.less

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