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 .profile-match-wrapper {
1389         float: left;
1390         margin: 0 5px 40px 0;
1391         width: 120px;
1392         height: 120px;
1393         padding: 3px;
1394         position: relative;
1395 }
1396 .icon.drophide.profile-match-ignore {
1397         margin: 0 6px 0 -3px;
1398 }
1399 .profile-match-photo {
1400
1401 }
1402
1403 [id$="-end"], [class$="end"] {
1404   clear: both;
1405   margin: 0 0 10px 0; }
1406
1407 .profile-match-end {
1408         margin: 0 0 5px 0;
1409 }
1410 .profile-match-name {
1411         font-weight: bold;
1412         margin: auto auto auto 23px;
1413 }
1414 .profile-match-connect {
1415         font-style: italic;
1416         margin: auto auto auto 23px;
1417 }
1418 #advanced-profile-with {
1419   margin-left: 200px; }
1420
1421 /**
1422  * photos
1423  */
1424
1425 .photos {
1426   height: auto;
1427   overflow: auto; }
1428
1429 #photo-top-links {
1430   margin-bottom: 30px; }
1431
1432 .photo-album-image-wrapper, .photo-top-image-wrapper {
1433   float: left;
1434   -moz-box-shadow: 3px 3px 10px 0 #000;
1435   -webkit-box-shadow: 3px 3px 10px 0 #000;
1436   box-shadow: 3px 3px 10px 0 #000;
1437   background-color: #222;
1438   color: #2e2f2e;
1439   -webkit-border-radius: 5px;
1440   -moz-border-radius: 5px;
1441   border-radius: 5px;
1442   padding-bottom: 30px;
1443   position: relative;
1444   margin: 0 10px 10px 0; }
1445
1446 #photo-photo {
1447   max-width: 100%;
1448   img {
1449     max-width: 100%; } }
1450
1451 .photo-top-image-wrapper a:hover, #photo-photo a:hover, .photo-album-image-wrapper a:hover {
1452   border-bottom: 0; }
1453
1454 .photo-top-photo, .photo-album-photo {
1455   -webkit-border-radius: 5px 5px 0 0;
1456   -moz-border-radius: 5px 5px 0 0;
1457   border-radius: 5px 5px 0 0; }
1458
1459 .photo-top-album-name {
1460   position: absolute;
1461   bottom: 0;
1462   padding: 0 5px; }
1463
1464 .caption {
1465   position: absolute;
1466   bottom: 0;
1467   margin: 0 5px; }
1468
1469 #photo-photo {
1470   position: relative;
1471   float: left; }
1472
1473 #photo-prev-link, #photo-next-link {
1474   position: absolute;
1475   width: 30%;
1476   height: 100%;
1477   background-color: rgba(255, 255, 255, 0.5);
1478   opacity: 0;
1479   -webkit-transition: all .2s ease-in-out;
1480   -moz-transition: all .2s ease-in-out;
1481   -o-transition: all .2s ease-in-out;
1482   -ms-transition: all .2s ease-in-out;
1483   transition: all .2s ease-in-out;
1484   background-position: center center;
1485   background-repeat: no-repeat; }
1486
1487 #photo-prev-link {
1488         background-image: url(dark/prev.png);
1489     height: 350px;
1490     left: 1%;
1491     top: 215px;
1492     width: 50px;
1493     z-index: 10;
1494 }
1495
1496 #photo-next-link {
1497         background-image: url(dark/next.png);
1498     height: 350px;
1499     right: 45%;
1500     top: 215px;
1501     width: 50px;
1502 }
1503
1504 #photo-prev-link a, #photo-next-link a {
1505   display: block;
1506   width: 100%;
1507   height: 100%;
1508   overflow: hidden;
1509   text-indent: -900000px; }
1510
1511 #photo-prev-link:hover {
1512   opacity: 1;
1513   -webkit-transition: all .2s ease-in-out;
1514   -moz-transition: all .2s ease-in-out;
1515   -o-transition: all .2s ease-in-out;
1516   -ms-transition: all .2s ease-in-out;
1517   transition: all .2s ease-in-out; }
1518
1519 #photo-next-link {
1520   &:hover {
1521     opacity: 1;
1522     -webkit-transition: all .2s ease-in-out;
1523     -moz-transition: all .2s ease-in-out;
1524     -o-transition: all .2s ease-in-out;
1525     -ms-transition: all .2s ease-in-out;
1526     transition: all .2s ease-in-out; }
1527   .icon {
1528     display: none; } }
1529
1530 #photo-prev-link .icon {
1531   display: none; }
1532
1533 #photos-upload-spacer, #photos-upload-new-wrapper, #photos-upload-exist-wrapper {
1534   margin-bottom: 1em; }
1535
1536 #photos-upload-existing-album-text, #photos-upload-newalbum-div {
1537   background-color: #555753;
1538   color: #eeeeec;
1539   padding: 1px; }
1540
1541 #photos-upload-album-select, #photos-upload-newalbum {
1542   width: 99%; }
1543
1544 #photos-upload-perms-menu {
1545   text-align: right; }
1546
1547 #photo-edit-caption, #photo-edit-newtag, #photo-edit-albumname {
1548   float: left;
1549   margin-bottom: 25px; }
1550
1551 #photo-edit-link-wrap {
1552   margin-bottom: 15px; }
1553
1554 #photo-edit-caption, #photo-edit-newtag {
1555   width: 100%; }
1556
1557 #photo-like-div {
1558   margin-bottom: 25px; }
1559
1560 #photo-edit-caption-end, #photo-edit-tags-end, #photo-edit-albumname-end {
1561   clear: both; }
1562
1563 #photo-edit-delete-button {
1564   margin-left: 200px; }
1565
1566 #photo-edit-end {
1567   margin-bottom: 35px; }
1568
1569 #photo-caption {
1570   font-size: 110%;
1571   font-weight: bold;
1572   margin-top: 15px;
1573   margin-bottom: 15px; }
1574
1575 /**
1576  * message
1577  */
1578
1579 .prvmail-text {
1580   width: 100%; }
1581
1582 #prvmail-subject {
1583   width: 100%;
1584   color: #2e2f2e;
1585   background: #eec; }
1586
1587 #prvmail-submit-wrapper {
1588   margin-top: 10px; }
1589
1590 #prvmail-submit {
1591   float: right;
1592   margin-top: 0; }
1593
1594 #prvmail-submit-wrapper div {
1595   margin-right: 5px;
1596   float: left; }
1597
1598 .mail-list-outside-wrapper {
1599   margin-top: 20px; }
1600
1601 .mail-list-sender {
1602   float: left; }
1603
1604 .mail-list-detail {
1605   margin-left: 90px; }
1606
1607 .mail-list-sender-name {
1608   display: inline;
1609   font-size: 1.1em; }
1610
1611 .mail-list-date {
1612   display: inline;
1613   font-size: 0.9em;
1614   padding-left: 10px; }
1615
1616 .mail-list-sender-name, .mail-list-date {
1617   font-style: italic; }
1618
1619 .mail-list-subject {
1620   font-size: 1.2em; }
1621
1622 .mail-list-delete-wrapper {
1623   float: right; }
1624
1625 .mail-list-outside-wrapper-end {
1626   clear: both;
1627   border-bottom: 1px #eec dotted; }
1628
1629 .mail-conv-sender {
1630   float: left;
1631   margin: 0px 5px 5px 0px; }
1632
1633 .mail-conv-sender-photo {
1634   width: 32px;
1635   height: 32px; }
1636
1637 .mail-conv-sender-name {
1638   float: left; }
1639
1640 .mail-conv-date {
1641   float: right; }
1642
1643 .mail-conv-subject {
1644   clear: right;
1645   font-weight: bold;
1646   font-size: 1.2em; }
1647
1648 .mail-conv-body {
1649   clear: both; }
1650
1651 .mail-conv-delete-wrapper {
1652   margin-top: 5px; }
1653
1654 /**
1655  * contacts
1656  */
1657
1658 .view-contact-wrapper, .contact-entry-wrapper {
1659   float: left;
1660   margin: 0 5px 40px 0;
1661   width: 120px;
1662   height: 120px;
1663   padding: 3px;
1664   position: relative; }
1665
1666 .contact-direction-wrapper {
1667   position: absolute;
1668   top: 20px; }
1669
1670 .contact-edit-links {
1671   position: absolute;
1672   top: 60px; }
1673
1674 .contact-entry-photo-wrapper {}
1675
1676 .contact-entry-photo {
1677   margin-left: 20px; }
1678
1679 .contact-entry-name {
1680   width: 120px;
1681   font-weight: bold;
1682   /*overflow: hidden;*/ }
1683
1684 .contact-entry-photo {
1685   position: relative; }
1686
1687 .contact-entry-edit-links .icon {
1688   border: 1px solid #babdb6;
1689   -webkit-border-radius: 3px;
1690   -moz-border-radius: 3px;
1691   border-radius: 3px;
1692   background-color: #fff; }
1693
1694 #contact-entry-url, [id^="contact-entry-url"] {
1695   font-size: smaller;
1696   /*overflow: scroll;*/ }
1697
1698 #contact-entry-network, [id^="contact-entry-network"] {
1699   font-size: smaller;
1700   font-style: italic; }
1701
1702 #contact-edit-banner-name {
1703   font-size: 1.5em; }
1704
1705 #contact-edit-photo-wrapper {
1706   position: relative;
1707   float: left;
1708   padding: 20px; }
1709
1710 #contact-edit-direction-icon {
1711   position: absolute;
1712   top: 60px;
1713   left: 0; }
1714
1715 #contact-edit-nav-wrapper {
1716   margin-left: 0px; }
1717
1718 #contact-edit-links {
1719   margin-top: 23px;
1720   ul {
1721     list-style-type: none; } }
1722
1723 #contact-drop-links {
1724   margin-left: 5px; }
1725
1726 #contact-edit-nav-wrapper .icon {
1727   border: 1px solid #babdb6;
1728   -webkit-border-radius: 3px;
1729   -moz-border-radius: 3px;
1730   border-radius: 3px; }
1731
1732 #contact-edit-poll-wrapper {
1733   margin-left: 0px; }
1734
1735 #contact-edit-last-update-text {
1736   margin-bottom: 15px; }
1737
1738 #contact-edit-last-updated {
1739   font-weight: bold; }
1740
1741 #contact-edit-poll-text {
1742   display: inline; }
1743
1744 #contact-edit-info_tbl, #contact-edit-info_parent, .mceLayout {
1745   width: 100%; }
1746
1747 #contact-edit-end {
1748   clear: both;
1749   margin-bottom: 65px; }
1750
1751 .contact-photo-menu-button {
1752   position: absolute;
1753   background-image: url("dark/photo-menu.jpg");
1754   background-position: top left;
1755   background-repeat: no-repeat;
1756   margin: 0px;
1757   padding: 0px;
1758   width: 16px;
1759   height: 16px;
1760   top: 64px;
1761   left: 0px;
1762   overflow: hidden;
1763   text-indent: 40px;
1764   display: none; }
1765
1766 .contact-photo-menu {
1767   width: auto;
1768   border: 2px solid #444;
1769   background: #2e2f2e;
1770   color: #eec;
1771   position: absolute;
1772   left: 0px;
1773   top: 90px;
1774   display: none;
1775   z-index: 10000;
1776   ul {
1777     margin: 0px;
1778     padding: 0px;
1779     list-style: none; }
1780   li a {
1781     display: block;
1782     padding: 2px;
1783     &:hover {
1784       color: #fff;
1785       background: #3465A4;
1786       text-decoration: none; } } }
1787
1788 /**
1789  * register, settings & profile forms
1790  */
1791
1792 .openid {}
1793
1794 #id_openid_url {
1795   background: url(dark/login-bg.gif) no-repeat;
1796   background-position: 0 50%;
1797   padding-left: 18px; }
1798
1799 #settings-nickname-desc {
1800   background-color: #eec;
1801   -webkit-border-radius: 5px;
1802   -moz-border-radius: 5px;
1803   border-radius: 5px;
1804   padding: 5px;
1805   color: #111; }
1806
1807 #settings-default-perms {
1808   margin-bottom: 20px; }
1809
1810 #register-form div, #profile-edit-form div {
1811   clear: both; }
1812
1813 .settings-block {
1814   label {
1815     clear: left; }
1816   input {
1817     margin: 10px 5px; } }
1818
1819 /*#register-form label,     */
1820 /*#profile-edit-form label {*/
1821 /*    width: 300px;         */
1822 /*    float: left;          */
1823 /*}                         */
1824
1825 /*#register-form span,     */
1826 /*#profile-edit-form span {*/
1827 /*    color: #555753;      */
1828 /*    display: block;      */
1829 /*    margin-bottom: 20px; */
1830 /*}                        */
1831
1832 #profile-edit-marital-label span {
1833   margin: -4px; }
1834
1835 .settings-submit-wrapper, .profile-edit-submit-wrapper {
1836   margin: 0 0 30px -3px; }
1837
1838 .profile-edit-side-div {
1839   display: none; }
1840
1841 /*.profile-edit-side-div:hover {
1842     display: block;
1843 }
1844 .profile-edit-side-link {
1845     margin: 3px 0px 0px 70px;
1846 }*/
1847
1848 #profiles-menu-trigger {
1849   margin: 0px 0px 0px 25px; }
1850
1851 .profile-listing {
1852   float: left;
1853   margin: 20px 20px 0px 0px; }
1854
1855 .icon-profile-edit {
1856   background: url("dark/icons.png") -150px 0px no-repeat;
1857   border: 0;
1858   cursor: pointer;
1859   display: block;
1860   float: right;
1861   width: 20px;
1862   height: 20px;
1863   margin: 0 0 -18px;
1864   position: absolute;
1865   text-decoration: none;
1866   top: 113px;
1867   right: 260px; }
1868
1869 #profile-edit-links ul {
1870   margin: 20px 0;
1871   padding: 0;
1872   list-style: none; }
1873
1874 .marital {
1875   margin-top: 5px; }
1876
1877 #register-sitename {
1878   display: inline;
1879   font-weight: bold; }
1880
1881 #advanced-expire-popup {
1882   background: #2e2f2e;
1883   color: #eec; }
1884
1885 #id_ssl_policy {
1886   width: 374px; }
1887
1888 #theme-preview img {
1889   margin: 10px 10px 10px 288px; }
1890
1891 /**
1892  * contacts selector
1893  */
1894
1895 .group-delete-wrapper {
1896   margin: -31px 50px 0 0;
1897   float: right; }
1898
1899 /*.group-delete-icon {
1900     margin: 0 0 0 10px;
1901 }*/
1902
1903 #group-edit-submit-wrapper {
1904   margin: 0 0 10px 0;
1905   display: inline; }
1906
1907 #group-edit-desc {
1908   margin: 10px 0px; }
1909
1910 #group-members, #prof-members {
1911   height: 200px;
1912   overflow: auto;
1913   border: 1px solid #555753;
1914   -webkit-border-radius: 5px 5px 0 0;
1915   -moz-border-radius: 5px 5px 0 0;
1916   border-radius: 5px 5px 0 0; }
1917
1918 #group-all-contacts, #prof-all-contacts {
1919   height: 200px;
1920   overflow: auto;
1921   border: 1px solid #555753;
1922   -webkit-border-radius: 0 0 5px 5px;
1923   -moz-border-radius: 0 0 5px 5px;
1924   border-radius: 0 0 5px 5px; }
1925
1926 #group-members h3, #group-all-contacts h3, #prof-members h3, #prof-all-contacts h3 {
1927   color: #eeeeec;
1928   background-color: #555753;
1929   margin: 0;
1930   padding: 5px; }
1931
1932 #group-separator, #prof-separator {
1933   display: none; }
1934
1935 /**
1936  * profile
1937  */
1938
1939 #cropimage-wrapper {
1940   float: left; }
1941
1942 #crop-image-form {
1943   clear: both; }
1944
1945 /**
1946  * intros
1947  */
1948
1949 .intro-wrapper {
1950   margin-top: 20px; }
1951
1952 .intro-fullname {
1953   font-size: 1.1em;
1954   font-weight: bold; }
1955
1956 .intro-desc {
1957   margin-bottom: 20px;
1958   font-weight: bold; }
1959
1960 .intro-note {
1961   padding: 10px; }
1962
1963 .intro-end {
1964   padding: 30px; }
1965
1966 .intro-form {
1967   float: left; }
1968
1969 .intro-approve-form, .intro-approve-as-friend-end {
1970   clear: both; }
1971
1972 .intro-submit-approve, .intro-submit-ignore {
1973   margin-right: 20px; }
1974
1975 .intro-submit-approve {
1976   margin-top: 15px; }
1977
1978 .intro-approve-as-friend-label, .intro-approve-as-fan-label, .intro-approve-as-friend, .intro-approve-as-fan {
1979   float: left; }
1980
1981 .intro-form-end {
1982   clear: both;
1983   margin-bottom: 10px; }
1984
1985 .intro-approve-as-friend-desc {
1986   margin-top: 10px; }
1987
1988 .intro-approve-as-end {
1989   clear: both;
1990   margin-bottom: 10px; }
1991
1992 .intro-end, .clear {
1993   clear: both; }
1994
1995 /**
1996  * events
1997  */
1998
1999 .eventcal {
2000   float: left;
2001   font-size: 20px; }
2002
2003 .event {
2004   background: #2e2f2e; }
2005
2006 .vevent {
2007   border: 1px solid #ccc;
2008   .event-description, .event-location, .event-start {
2009     margin-left: 10px;
2010     margin-right: 10px; } }
2011
2012 #new-event-link {
2013   margin-bottom: 10px; }
2014
2015 .edit-event-link, .plink-event-link {
2016   /*float: left;      */
2017   /*margin-top: 4px;  */
2018   /*margin-right: 4px;*/
2019   /*margin-bottom: 15px;*/ }
2020
2021 .event-description:before {
2022   content: url('../../../images/calendar.png');
2023   margin-right: 15px; }
2024
2025 .event-start, .event-end {
2026   margin-left: 10px;
2027   width: 330px;
2028   font-size: smaller; }
2029
2030 .event-start .dtstart, .event-end .dtend {
2031   float: right; }
2032
2033 .event-list-date {
2034   margin-bottom: 10px; }
2035
2036 .prevcal, .nextcal {
2037   float: left;
2038   margin-left: 32px;
2039   margin-right: 32px;
2040   margin-top: 64px; }
2041
2042 .event-calendar-end {
2043   clear: both; }
2044
2045 .calendar {
2046   font-family: monospace; }
2047
2048 .today {
2049   font-weight: bold;
2050   color: #FF0000; }
2051
2052 #event-start-text, #event-finish-text {
2053   margin-top: 10px;
2054   margin-bottom: 5px; }
2055
2056 #event-nofinish-checkbox, #event-nofinish-text, #event-adjust-checkbox, #event-adjust-text, #event-share-checkbox {
2057   float: left; }
2058
2059 #event-datetime-break {
2060   margin-bottom: 10px; }
2061
2062 #event-nofinish-break, #event-adjust-break, #event-share-break {
2063   clear: both; }
2064
2065 #event-desc-text, #event-location-text {
2066   margin-top: 10px;
2067   margin-bottom: 5px; }
2068
2069 #event-submit {
2070   margin-top: 10px; }
2071
2072 .body-tag {
2073   margin: 10px 0;
2074   opacity: 0.5;
2075   &:hover {
2076     opacity: 1.0 !important; } }
2077
2078 .filesavetags, .categorytags {
2079   margin: 20px 0;
2080   opacity: 0.5; }
2081
2082 .filesavetags:hover, .categorytags:hover {
2083   margin: 20px 0;
2084   opacity: 1.0 !important; }
2085
2086 .item-select {
2087   opacity: 0.1;
2088   margin: 5px 0 0 6px !important;
2089   &:hover {
2090     opacity: 1; } }
2091
2092 .checkeditem {
2093   opacity: 1; }
2094
2095 #item-delete-selected {
2096   margin-top: 30px; }
2097
2098 /* was tired of having no way of moving it around, so
2099 * here's a little 'hook' to do so */
2100
2101 .delete-checked {
2102   position: absolute;
2103   left: 35px;
2104   margin-top: 20px; }
2105
2106 #item-delete-selected-end {
2107   clear: both; }
2108
2109 #item-delete-selected-icon {
2110   float: left;
2111   margin-right: 5px; }
2112
2113 #item-delete-selected-desc {
2114   float: left;
2115   margin-right: 5px;
2116   &:hover {
2117     text-decoration: underline; } }
2118
2119 .fc-state-highlight {
2120   background: #eec;
2121   color: #2e2f2e; }
2122
2123 /**
2124  * directory
2125  */
2126
2127 .directory-item {
2128   float: left;
2129   margin: 0 5px 4px 0;
2130   padding: 3px;
2131   width: 180px;
2132   height: 250px;
2133   position: relative; }
2134
2135 /**
2136  * sidebar
2137  */
2138
2139 #group-sidebar {
2140   margin-bottom: 10px; }
2141
2142 .group-selected, .nets-selected, .fileas-selected {
2143   padding: 3px;
2144   color: #2e2f2e;
2145   background: #88a9d2;
2146   font-weight: bold; }
2147
2148 .group-selected:hover, .nets-selected:hover, .fileas-selected:hover {
2149   color: #2e2f2e; }
2150
2151 .groupsideedit {
2152   margin-right: 10px; }
2153
2154 #sidebar-group-ul {
2155   padding-left: 0; }
2156
2157 #sidebar-group-list {
2158   margin: 0 0 5px 0;
2159   ul {
2160     list-style-type: none;
2161     list-style-position: inside; }
2162   li {
2163     margin-top: 10px; }
2164   .icon {
2165     display: inline-block;
2166     height: 12px;
2167     width: 12px; } }
2168
2169 #sidebar-new-group {
2170   margin: auto;
2171   display: inline-block;
2172   color: #efefef;
2173   text-decoration: none;
2174   text-align: center; }
2175
2176 #peoplefind-sidebar form {
2177   margin-bottom: 10px; }
2178
2179 #sidebar-new-group {
2180   &:hover {
2181     /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
2182     /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
2183     /*background-color: #b20202;*/ }
2184   &:active {
2185     position: relative;
2186     top: 1px; } }
2187
2188 #side-peoplefind-url {
2189   background-color: #2e2f2e;
2190   color: #eec;
2191   border: 1px #999 solid;
2192   margin-right: 3px;
2193   width: 75%;
2194   &:hover, &:focus {
2195     background-color: #efefef;
2196     color: #222;
2197     border: 1px 333 solid; } }
2198
2199 .nets-ul {
2200   list-style-type: none;
2201   padding-left: 0px;
2202   li {
2203     margin: 10px 0 0; } }
2204
2205 .nets-link, .nets-all {
2206   margin-left: 0px; }
2207
2208 #netsearch-box {
2209   margin-top: 20px;
2210   width: 150px;
2211   #search-submit {
2212     margin: 5px 0px 0px 0px; } }
2213
2214 /**
2215  * admin
2216  */
2217
2218 #pending-update {
2219   float: right;
2220   color: #fff;
2221   font-weight: bold;
2222   background-color: #ff0000;
2223   padding: 0 .3em; }
2224
2225 .admin {
2226   &.linklist {
2227     border: 0;
2228     padding: 0; }
2229   &.link {
2230     list-style-position: inside; } }
2231
2232 #adminpage {
2233   color: #eec;
2234   background: #2e2f2e;
2235   margin: 5px;
2236   padding: 10px;
2237   dl {
2238     clear: left;
2239     margin-bottom: 2px;
2240     padding-bottom: 2px;
2241     border-bottom: 1px solid #000; }
2242   dt {
2243     width: 250px;
2244     float: left;
2245     font-weight: bold; }
2246   dd {
2247     margin-left: 250px; }
2248   h3 {
2249     border-bottom: 1px solid #ccc; }
2250   .submit {
2251     clear: left; }
2252   #pluginslist {
2253     margin: 0;
2254     padding: 0; }
2255   .plugin {
2256     list-style: none;
2257     display: block;
2258     border: 1px solid #888;
2259     padding: 1em;
2260     margin-bottom: 5px;
2261     clear: left; }
2262   .toggleplugin {
2263     float: left;
2264     margin-right: 1em; }
2265   table {
2266     width: 100%;
2267     border-bottom: 1px solid #000;
2268     margin: 5px 0;
2269     th {
2270       text-align: left; } }
2271   td .icon {
2272     float: left; }
2273   table {
2274     &#users img {
2275       width: 16px;
2276       height: 16px; }
2277     tr:hover {
2278       color: #2e2f2e;
2279       background-color: #eec; } }
2280   .selectall {
2281     text-align: right; }
2282   #users a {
2283     color: #eec;
2284     text-decoration: underline; } }
2285
2286 #users .name {
2287   color: #eec; }
2288
2289 /**
2290  * form fields
2291  */
2292
2293 .field {
2294   /*margin-bottom: 10px;*/
2295   /*padding-bottom: 10px;*/
2296   overflow: auto;
2297   /* width: 100%;*/
2298   label {
2299     width: 38%;
2300     display: inline-block;
2301     font-size: 1.077em;
2302     margin: 0 10px 1em 0;
2303     border: 1px #2e2f2e solid;
2304     padding: 5px;
2305     background: #eec;
2306     color: #111; } }
2307
2308 .field .onoff {
2309   float: right;
2310   margin: 0 330px 0 auto;
2311   width: 80px;
2312   a {
2313     display: block;
2314     border: 1px solid #666;
2315     padding: 3px 6px 4px 10px;
2316     height: 16px;
2317     text-decoration: none; }
2318   .on {
2319     background: url("../../../images/onoff.jpg") no-repeat 42px 1px #999999;
2320     color: #111;
2321     text-align: left; }
2322   .off {
2323     background: url("../../../images/onoff.jpg") no-repeat 2px 1px #cccccc;
2324     color: #333;
2325     text-align: right; } }
2326
2327 .hidden {
2328   display: none !important; }
2329
2330 .field textarea {
2331   width: 80%;
2332   height: 100px; }
2333
2334 .field_help {
2335   display: block;
2336   margin-left: 297px;
2337   color: #aaa; }
2338
2339 .field.radio .field_help {
2340   margin-left: 297px; }
2341
2342 label {
2343   width: 38%;
2344   display: inline-block;
2345   font-size: 1.077em;
2346   margin: 0 10px 1em 0;
2347   border: 1px #2e2f2e solid;
2348   padding: 5px;
2349   background: #eec;
2350   color: #111; }
2351
2352 input {
2353   width: 250px;
2354   height: 25px;
2355   border: 1px #999 solid;
2356   &[type="text"], &[type="password"], &[type="search"] {
2357     width: 250px;
2358     height: 25px;
2359     border: 1px #999 solid; }
2360   &[type="checkbox"], &[type="radio"] {
2361     border: 1px #999 solid;
2362     margin: 0 0 0 0;
2363     height: 15px;
2364     width: 15px; }
2365   &[type="submit"], &[type="button"] {
2366     background-color: #eee;
2367     border: 2px outset #aaa;
2368     border-radius: 5px;
2369     box-shadow: 1px 3px 4px 0 #111;
2370     color: #2e302e;
2371     cursor: pointer;
2372     font-weight: bold;
2373     width: auto;
2374     text-shadow: 1px 1px #000;
2375     -webkit-border-radius: 5px;
2376     -moz-border-radius: 5px; }
2377   &[type="submit"]:active, &[type="button"]:active {
2378     box-shadow: 0 0 0 0; } }
2379
2380
2381 /*
2382  * update
2383  */
2384
2385 .popup {
2386   width: 100%;
2387   height: 100%;
2388   top: 0px;
2389   left: 0px;
2390   position: absolute;
2391   display: none;
2392   .background {
2393     background-color: #000;
2394     opacity: 0.5;
2395     width: 100%;
2396     height: 100%;
2397     position: absolute;
2398     top: 0px;
2399     left: 0px; }
2400   .panel {
2401     top: 25%;
2402     left: 25%;
2403     width: 50%;
2404     height: 50%;
2405     padding: 1em;
2406     position: absolute;
2407     border: 4px solid #000000;
2408     background-color: #FFFFFF; } }
2409
2410 #panel {
2411   z-index: 100; }
2412
2413 .grey {
2414   color: grey; }
2415
2416 .orange {
2417   color: orange; }
2418
2419 .red {
2420   color: red; }
2421
2422 .popup .panel {
2423   .panel_text {
2424     display: block;
2425     overflow: auto;
2426     height: 80%; }
2427   .panel_in {
2428     width: 100%;
2429     height: 100%;
2430     position: relative; }
2431   .panel_actions {
2432     width: 100%;
2433     bottom: 4px;
2434     left: 0px;
2435     position: absolute; } }
2436
2437 .panel_text .progress {
2438   width: 50%;
2439   overflow: hidden;
2440   height: auto;
2441   border: 1px solid #cccccc;
2442   margin-bottom: 5px;
2443   span {
2444     float: right;
2445     display: block;
2446     width: 25%;
2447     background-color: #eeeeee;
2448     text-align: right; } }
2449
2450 /**
2451  * OAuth
2452  */
2453
2454 .oauthapp {
2455   height: auto;
2456   overflow: auto;
2457   border-bottom: 2px solid #cccccc;
2458   padding-bottom: 1em;
2459   margin-bottom: 1em;
2460   img {
2461     float: left;
2462     width: 48px;
2463     height: 48px;
2464     margin: 10px;
2465     &.noicon {
2466       background-image: url("../../../images/icons/48/plugin.png");
2467       background-position: center center;
2468       background-repeat: no-repeat; } }
2469   a {
2470     float: left; } }
2471
2472 /**
2473  * icons
2474  */
2475
2476 .iconspacer {
2477   display: block;
2478   width: 16px;
2479   height: 16px; }
2480
2481 .icon {
2482   display: block;
2483   width: 20px;
2484   height: 20px;
2485   background: url(dark/icons.png) no-repeat;
2486   border: 0;
2487   text-decoration: none;
2488   border-radius: 5px;
2489   &:hover {
2490     border: 0;
2491     text-decoration: none; } }
2492
2493 .editicon {
2494   display: inline-block;
2495   width: 21px;
2496   height: 21px;
2497   background: url(dark/editicons.png) no-repeat;
2498   border: 0;
2499   text-decoration: none; }
2500
2501 .shadow {
2502   box-shadow: 2px 2px 5px 2px #111;
2503   &:active, &:focus, &:hover {
2504     box-shadow: 0 0 0 0; } }
2505
2506 .editicon:hover {
2507   border: 0; }
2508
2509 .boldbb {
2510   background-position: 0px 0px;
2511   &:hover {
2512     background-position: -22px 0px; } }
2513
2514 .italicbb {
2515   background-position: 0px -22px;
2516   &:hover {
2517     background-position: -22px -22px; } }
2518
2519 .underlinebb {
2520   background-position: 0px -44px;
2521   &:hover {
2522     background-position: -22px -44px; } }
2523
2524 .quotebb {
2525   background-position: 0px -66px;
2526   &:hover {
2527     background-position: -22px -66px; } }
2528
2529 .codebb {
2530   background-position: 0px -88px;
2531   &:hover {
2532     background-position: -22px -88px; } }
2533
2534 .imagebb {
2535   background-position: -44px 0px;
2536   &:hover {
2537     background-position: -66px 0px; } }
2538
2539 .urlbb {
2540   background-position: -44px -22px;
2541   &:hover {
2542     background-position: -66px -22px; } }
2543
2544 .videobb {
2545   background-position: -44px -44px;
2546   &:hover {
2547     background-position: -66px -44px; } }
2548
2549 .icon {
2550   &.drop, &.drophide, &.delete {
2551     float: left;
2552     margin: 0 2px; }
2553   &.s22 {
2554     &.delete {
2555       display: block;
2556       background-position: -110px 0; }
2557     &.text {
2558       padding: 10px 0px 0px 25px;
2559       width: 200px; } }
2560   &.text {
2561     text-indent: 0px; }
2562   &.s16 {
2563     min-width: 16px;
2564     height: 16px; } }
2565
2566 .s16 .add {
2567   background: url("../../../images/icons/16/add.png") no-repeat; }
2568
2569 .add {
2570   margin: 0px 5px; }
2571
2572 .article {
2573   background-position: -50px 0; }
2574
2575 .audio {
2576   background-position: -70px 0; }
2577
2578 .block {
2579   background-position: -90px 0px; }
2580
2581 .drop, .delete {
2582   background-position: -110px 0; }
2583
2584 .drophide {
2585   background-position: -130px 0; }
2586
2587 .edit {
2588   background-position: -150px 0; }
2589
2590 .camera {
2591   background-position: -170px 0; }
2592
2593 .dislike {
2594   background-position: -190px 0; }
2595
2596 .file-as {
2597   background-position: -230px -60px; }
2598
2599 .like {
2600   background-position: -211px 0; }
2601
2602 .link {
2603   background-position: -230px 0; }
2604
2605 .globe, .location {
2606   background-position: -50px -20px; }
2607
2608 .noglobe, .nolocation {
2609   background-position: -70px -20px; }
2610
2611 .no {
2612   background-position: -90px -20px; }
2613
2614 .pause {
2615   background-position: -110px -20px; }
2616
2617 .play {
2618   background-position: -130px -20px; }
2619
2620 .pencil {
2621   background-position: -151px -18px; }
2622
2623 .small-pencil {
2624   background-position: -170px -20px; }
2625
2626 .recycle {
2627   background-position: -190px -20px; }
2628
2629 .remote-link {
2630   background-position: -210px -20px; }
2631
2632 .share {
2633   background-position: -230px -20px; }
2634
2635 .tools {
2636   background-position: -50px -40px; }
2637
2638 .lock {
2639   background-position: -70px -40px; }
2640
2641 .unlock {
2642   background-position: -88px -40px; }
2643
2644 .video {
2645   background-position: -110px -40px; }
2646
2647 .attach {
2648   background-position: -190px -40px; }
2649
2650 .language {
2651   background-position: -210px -40px; }
2652
2653 .starred {
2654   background-position: -130px -60px; }
2655
2656 .unstarred {
2657   background-position: -150px -60px; }
2658
2659 .tagged {
2660   background-position: -170px -60px; }
2661
2662 .on {
2663   background-position: -50px -60px; }
2664
2665 .off {
2666   background-position: -70px -60px; }
2667
2668 .prev {
2669   background-position: -90px -60px; }
2670
2671 .next {
2672   background-position: -110px -60px; }
2673
2674 .icon.dim {
2675   opacity: 0.3; }
2676
2677 #pause {
2678   position: fixed;
2679   bottom: 40px;
2680   right: 30px; }
2681
2682 .border {
2683   border: 1px solid #babdb6;
2684   -webkit-border-radius: 5px;
2685   -moz-border-radius: 5px;
2686   border-radius: 5px;
2687   &:hover {
2688     border: 1px solid #babdb6;
2689     -webkit-border-radius: 5px;
2690     -moz-border-radius: 5px;
2691     border-radius: 5px; } }
2692
2693 .attachtype {
2694   display: block;
2695   width: 20px;
2696   height: 23px;
2697   background-image: url(../../../images/content-types.png); }
2698
2699 .type-video {
2700   background-position: 0px 0px; }
2701
2702 .type-image {
2703   background-position: -20px 0; }
2704
2705 .type-audio {
2706   background-position: -40px 0; }
2707
2708 .type-text {
2709   background-position: -60px 0px; }
2710
2711 .type-unkn {
2712   background-position: -80px 0; }
2713
2714 /**
2715  * footer
2716  */
2717
2718 .cc-license {
2719   margin-top: 100px;
2720   font-size: 0.7em; }
2721
2722 footer {
2723   display: block;
2724   /*margin: 50px 20%;*/
2725   clear: both; }
2726
2727 #profile-jot-text {
2728   height: 20px;
2729   color: #eec;
2730   border: 1px solid #eec;
2731   border-radius: 5px;
2732   width: 99.5%; }
2733
2734 /**
2735  * acl
2736  */
2737
2738 #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper {
2739   display: block !important;
2740   background: #2e2f2e;
2741   color: #eec; }
2742
2743 #acl-wrapper {
2744   width: 660px;
2745   margin: 0 auto; }
2746
2747 #acl-search {
2748   float: right;
2749   background: white url("../../../images/search_18.png") no-repeat right center;
2750   padding-right: 20px;
2751   margin: 6px;
2752   color: #111; }
2753
2754 #acl-showall {
2755   float: left;
2756   display: block;
2757   width: auto;
2758   height: 18px;
2759   background: #eeeecc url("../../../images/show_all_off.png") 8px 8px no-repeat;
2760   padding: 7px 10px 7px 30px;
2761   -webkit-border-radius: 5px;
2762   -moz-border-radius: 5px;
2763   border-radius: 5px;
2764   color: #999;
2765   margin: 5px 0;
2766   &.selected {
2767     color: #000;
2768     background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat; } }
2769
2770 #acl-list {
2771   height: 210px;
2772   border: 1px solid #ccc;
2773   clear: both;
2774   margin-top: 30px;
2775   overflow: auto; }
2776
2777 /*#acl-list-content {
2778 }*/
2779
2780 .acl-list-item {
2781   border: 1px solid #eec;
2782   display: block;
2783   float: left;
2784   height: 110px;
2785   margin: 3px 0 5px 5px;
2786   width: 120px;
2787   img {
2788     width: 22px;
2789     height: 22px;
2790     float: left;
2791     margin: 5px 5px 20px; }
2792   p {
2793     height: 12px;
2794     font-size: 10px;
2795     margin: 0 0 22px;
2796     padding: 2px 0 1px; }
2797   a {
2798     background: #eeeecc 3px 3px no-repeat;
2799     -webkit-border-radius: 2px;
2800     -moz-border-radius: 2px;
2801     border-radius: 2px;
2802     clear: both;
2803     font-size: 10px;
2804     display: block;
2805     width: 55px;
2806     height: 20px;
2807     color: #2e2f2e;
2808     margin: 5px auto 0;
2809     padding: 0 3px;
2810     text-align: center;
2811     vertical-align: middle; } }
2812
2813 #acl-wrapper a:hover {
2814   text-decoration: none;
2815   color: #2e2f2e;
2816   border: 0; }
2817
2818 .acl-button-show {
2819   background-image: url('../../../images/show_off.png');
2820   margin: 0 auto; }
2821
2822 .acl-button-hide {
2823   background-image: url('../../../images/hide_off.png');
2824   margin: 0 auto; }
2825
2826 .acl-button-show.selected {
2827   color: #2e2f2e;
2828   background-color: #9ade00;
2829   background-image: url(../../../images/show_on.png); }
2830
2831 .acl-button-hide.selected {
2832   color: #2e2f2e;
2833   background-color: #ff4141;
2834   background-image: url(../../../images/hide_on.png); }
2835
2836 .acl-list-item {
2837   &.groupshow {
2838     border-color: #9ade00; }
2839   &.grouphide {
2840     border-color: #ff4141; } }
2841
2842 /** /acl **/
2843
2844 /* autocomplete popup */
2845
2846 .acpopup {
2847   max-height: 175px;
2848   max-width: 42%;
2849   background-color: #555753;
2850   color: #fff;
2851   overflow: auto;
2852   z-index: 100000;
2853   border: 1px solid #cccccc; }
2854
2855 .acpopupitem {
2856   background-color: #555753;
2857   padding: 4px;
2858   clear: left;
2859   img {
2860     float: left;
2861     margin-right: 4px; }
2862   &.selected {
2863     color: #2e302e;
2864     background-color: #eeeeec; } }
2865
2866 .qcomment-wrapper {
2867   padding: 0px;
2868   margin: 5px 5px 5px 81%; }
2869
2870 .qcomment {
2871   opacity: 0.5;
2872   &:hover {
2873     opacity: 1.0; } }
2874
2875 #network-star-link {
2876   margin-top: 10px; }
2877
2878 .network-star {
2879   float: left;
2880   margin-right: 5px;
2881   &.icon.starred {
2882     display: inline-block; } }
2883
2884 #fileas-sidebar {}
2885
2886 .fileas-ul {
2887   padding: 0; }
2888
2889 /*
2890  * addons theming
2891  */
2892
2893 #sidebar-page-list {
2894   ul {
2895     padding: 0;
2896     margin: 5px 0; }
2897   li {
2898     list-style: none; } }
2899
2900 #jappix_mini {
2901   margin-left: 130px;
2902   position: fixed;
2903   bottom: 0;
2904   right: 175px !important;
2905   /* override the jappix css */
2906   z-index: 999; }
2907
2908 /* media stuff */
2909 @media handheld {
2910   body {
2911     font-size: 15pt; } }