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