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