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