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