view/theme/dispy/dark/style.less

   1 /*
   2  * dispy dark
   3  * Description: Dispy Dark: dark, sleek, functional
   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, by not including less.js.
  11  */
  12
  13 @import "_base";
  14
  15 ///* from html5boilerplate */
  16 ///* these are to tell browsers they should be displayed a certain way */
  17 article,
  18 aside,
  19 details,
  20 figcaption,
  21 figure,
  22 footer,
  23 header,
  24 hgroup,
  25 nav,
  26 section {
  27     display: block;
  28 }
  29 audio,
  30 canvas,
  31 video,
  32 time {
  33     display: inline-block;
  34     *display: inline;
  35     *zoom: 1;
  36 }
  37 audio:not([controls]),
  38 [hidden] {
  39     display: none;
  40 }
  41 ///*
  42 // * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
  43 // * 2. Force vertical scrollbar in non-IE
  44 // * 3. Prevent iOS text size adjust on device orientation change,
  45 // *        without disabling user zoom: h5bp.com/g
  46 // */
  47 html {
  48     font-size: 100%;
  49     overflow-y: scroll;
  50     .font_size_adjust;
  51 }
  52 body {
  53     margin: 0;
  54     padding: 0;
  55     .default_font;
  56     color: @main_colour;
  57     background-color: @bg_colour;
  58 }
  59 button,
  60 input,
  61 select,
  62 textarea {
  63     color: @main_colour;
  64     background-color: @bg_colour;
  65 }
  66 select {
  67     .borders(1px, dotted, darken(@main_alt_colour, 60%));
  68     padding: 1px;
  69     margin: 3px;
  70     color: @main_colour;
  71     background: @bg_colour;
  72     max-width: 85%;
  73     min-width: 85px;
  74 }
  75 option {
  76     padding: 1px;
  77     color: @main_colour;
  78     background: @bg_colour;
  79     &[selected="selected"] {
  80         color: @bg_colour;
  81         background: @main_colour;
  82     }
  83 }
  84 tr:nth-child(even) {
  85     background-color: lighten(@bg_colour, 10%);
  86 }
  87 ///* remember to define focus styles! */
  88 //outline   Sets all the outline properties in one declaration
  89 //outline-color     Sets the color of an outline    color_name,hex_number,rgb_number,invert,inherit
  90 //outline-style     Sets the style of an outline    dotted,dashed,solid,double,groove,ridge,inset,outset,inherit
  91 //outline-width     Sets the width of an outline    thin,medium,thick,length,inherit
  92 :focus {
  93     outline: none;
  94 }
  95 a:focus {
  96     outline: invert, dashed, thin;
  97 }
  98 [disabled="disabled"] {
  99     background: @med_bg_colour;
 100     color: @disabled_colour;
 101 }
 102 ///* remember to highlight inserts somehow! */
 103 ins,
 104 mark {
 105     background-color: @bg_alt_colour;
 106     color: @lt_main_colour;
 107 }
 108 ins {
 109     text-decoration: none;
 110 }
 111 mark {
 112     font-style: italic;
 113     font-weight: bold;
 114 }
 115 ///* Redeclare monospace font family: h5bp.com/j */
 116 pre,
 117 code,
 118 kbd,
 119 samp,
 120 .wall-item-body code {
 121     font-family: monospace, monospace;
 122     _font-family: monospace;
 123     font-size: 1em;
 124 }
 125 ///* Improve readability of pre-formatted text in all browsers */
 126 pre,
 127 .wall-item-body code {
 128     .wrap;
 129 }
 130 q {
 131     quotes: none;
 132     &:before, &:after {
 133         content: "";
 134         content: none;
 135     }
 136 }
 137 em {
 138     font-style: italic;
 139 }
 140 strong {
 141     font-weight: bold;
 142 }
 143 strike {
 144     text-decoration: line-through;
 145 }
 146 small {
 147     font-size: 85%;
 148 }
 149 ///* Position subscript and superscript content without affecting
 150 // * line-height: h5bp.com/k */
 151 sub,
 152 sup {
 153     font-size: 75%;
 154     line-height: 0;
 155     position: relative;
 156     vertical-align: baseline;
 157 }
 158 sub {
 159     bottom: -0.25em;
 160 }
 161 sup {
 162     top: -0.5em;
 163 }
 164 img {
 165     border: 0 none;
 166 }
 167 a {
 168     color: @link_colour;
 169     text-decoration: none;
 170     margin-bottom: 1px;
 171     &:hover {
 172         color: @hover_colour;
 173         border-bottom: 1px dotted @hover_colour;
 174     }
 175     &:hover img {
 176         text-decoration: none;
 177     }
 178 }
 179 blockquote {
 180     background: darken(@main_alt_colour, 66.5%);
 181     color: @main_colour;
 182     text-indent: 5px;
 183     padding: 5px;
 184     .borders(1px, solid, darken(@main_alt_colour, 33%));
 185     .rounded_corners;
 186 }
 187 .label () {
 188     width: 38%;
 189     display: inline-block;
 190     font-size: small;
 191     margin: 0 10px 1em 0;
 192     .borders(1px, solid, @bg_colour);
 193     padding: 3px 5px;
 194     background: @main_colour;
 195     color: darken(@main_alt_colour, 86.5%);
 196     .box_shadow(3px, 3px, 5px);
 197 }
 198 label {
 199     .label;
 200 }
 201 input {
 202     .box(250px, 25px);
 203     .borders(1px, solid, darken(@main_alt_colour, 33.5%));
 204     width: 17em;
 205     &[type="checkbox"],
 206     &[type="radio"] {
 207         .box(15px, 15px);
 208         margin: 0;
 209     }
 210     &[type="radio"] {
 211         margin: 5px 0;
 212     }
 213     &[type="submit"],
 214     &[type="button"] {
 215         background-color: @main_alt_colour;
 216         .borders(2px, outset, darken(@main_alt_colour, 24%));
 217         .rounded_corners;
 218         .box_shadow(1px, 3px, 4px, 0);
 219         color: @bg_alt_colour;
 220         cursor: pointer;
 221         font-weight: bold;
 222         width: auto;
 223         .text_shadow;
 224     }
 225     &[type="submit"]:active,
 226     &[type="button"]:active {
 227         .box_shadow(0, 0, 0, 0);
 228     }
 229 }
 230 h1, h2, h3,
 231 h4, h5, h6 {
 232     margin: 10px 0px;
 233     font-weight: bold;
 234     border-bottom: 1px solid @hover_colour;
 235 }
 236 h1 {
 237     font-size: x-large;
 238 }
 239 h2 {
 240     font-size: large;
 241 }
 242 h3 {
 243     font-size: medium;
 244 }
 245 h4 {
 246     font-size: small;
 247 }
 248 h5 {
 249     font-size: x-small;
 250 }
 251 h6 {
 252     font-size: xx-small;
 253 }
 254
 255 //
 256 .required {
 257     display: inline;
 258     color: red;
 259     font-size: 16px;
 260     font-weight: bold;
 261     margin: 3px;
 262 }
 263 .fakelink, .lockview {
 264     color: @link_colour;
 265     cursor: pointer;
 266 }
 267 .fakelink:hover {
 268     color: @hover_colour;
 269 }
 270 .smalltext {
 271     font-size: 0.7em;
 272 }
 273
 274
 275 /**
 276  * global
 277  */
 278 /* .tool .action */
 279 .action {
 280     margin: 5px 0;
 281 }
 282 .tool {
 283     margin: 5px 0;
 284     list-style: none;
 285 }
 286 #articlemain {
 287     .box(100%, 100%);
 288     margin: 0 auto;
 289 }
 290 .button {
 291     // .box(25%, auto);
 292     // background: @menu_bg_colour;
 293     color: @main_colour;
 294     // .borders(2px, outset, darken(@menu_bg_colour, 20%));
 295     .rounded_corners;
 296     padding: 5px;
 297     // font-size: smaller;
 298     cursor: pointer;
 299     // &.active {
 300         // .box_shadow(4px, 4px, 7px);
 301     // }
 302     a {
 303         color: @main_colour;
 304         // font-size: smaller;
 305         font-weight: bold;
 306     }
 307 }
 308 #profile-listing-desc {
 309     a {
 310         color: @main_colour;
 311         font-weight: bold;
 312     }
 313 }
 314 [class$="-desc"],
 315 [id$="-desc"] {
 316     color: @main_colour;
 317     background: @bg_colour;
 318     .borders(2px, outset, @dk_main_colour);
 319     .rounded_corners;
 320     // .box_shadow(3px, 3px, 5px);
 321     margin: 3px 10px 7px 0;
 322     padding: 5px;
 323     font-weight: bold;
 324     font-size: smaller;
 325 }
 326 #item-delete-selected-desc {
 327     float: left;
 328     font-size: x-small;
 329     margin-right: 5px;
 330     &:hover {
 331         text-decoration: underline;
 332     }
 333 }
 334 .intro-approve-as-friend-desc {
 335     margin-top: 10px;
 336 }
 337 .intro-desc {
 338     margin-bottom: 20px;
 339     font-weight: bold;
 340 }
 341 #group-edit-desc {
 342     margin: 10px 0px;
 343 }
 344 #settings-nickname-desc {
 345     background: @main_colour;
 346     .rounded_corners;
 347     .borders;
 348     padding: 5px;
 349     color: @bg_colour;
 350 }
 351 .contactname,
 352 .contact-name {
 353     font-weight: bold;
 354     font-size: smaller;
 355 }
 356 .contact-details {
 357     font-style: italic;
 358     font-size: smaller;
 359 }
 360 .like-rotator {
 361     vertical-align: middle;
 362     text-align: center;
 363     margin: 1px;
 364 }
 365
 366
 367 /**
 368  * login
 369  */
 370 #asidemain .field {
 371     overflow: hidden;
 372     width: 200px;
 373 }
 374 #login-extra-links {
 375     overflow: auto !important;
 376     padding-top: 60px !important;
 377     width: 100% !important;
 378     a {
 379         margin-right: 20px;
 380     }
 381 }
 382 #login_standard {
 383     display: block !important;
 384     float: none !important;
 385     height: 100% !important;
 386     position: relative !important;
 387     width: 100% !important;
 388     .field label {
 389         width: 200px !important;
 390     }
 391     input {
 392         margin: 0 0 8px !important;
 393         width: 210px !important;
 394         &[type="text"] {
 395             margin: 0 0 8px !important;
 396             width: 210px !important; }
 397     }
 398 }
 399 #login-submit-wrapper {
 400     margin: 0 !important;
 401 }
 402 #login-submit-button {
 403     margin-left: 0px !important;
 404 }
 405 #asidemain #login_openid {
 406     position: relative !important;
 407     float: none !important;
 408     margin-left: 0px !important;
 409     height: auto !important;
 410     width: 200px !important;
 411 }
 412 #login_openid {
 413     #id_openid_url {
 414         width: 180px !important;
 415         overflow: hidden !important; }
 416     label {
 417         width: 180px !important;
 418     }
 419 }
 420
 421
 422 /**
 423  * nav
 424  */
 425 nav {
 426     height: 60px;
 427     background-color: @dk_bg_colour;
 428     color: @main_alt_colour;
 429     position: relative;
 430     padding: 20px 20px 10px 95px;
 431     a {
 432         text-decoration: none;
 433         color: @main_alt_colour;
 434         border: 0px;
 435         &:hover {
 436             text-decoration: none;
 437             color: @main_alt_colour;
 438             border: 0px; } }
 439     #banner {
 440         display: block;
 441         position: absolute;
 442         left: 51px;
 443         top: 25px;
 444         #logo-text a {
 445             font-size: 40px;
 446             font-weight: bold;
 447             margin-left: 3px; } }
 448 }
 449 #site-location {
 450     font-weight: bold;
 451     font-style: italic;
 452     font-size: small;
 453     width: 30em;
 454     position: relative;
 455     left: -3.5em;
 456     top: 3em;
 457 }
 458 ul#user-menu-popup {
 459     display: none;
 460     position: absolute;
 461     background-color: @menu_bg_colour;
 462     width: 100%;
 463     padding: 10px 0px;
 464     margin: 3px 0 0;
 465     top: 20px;
 466     left: 0;
 467     font-size: small;
 468     line-height: 1;
 469     .rounded_corners(0 0 5px 5px);
 470     .box_shadow(5px, 5px, 10px, 0px);
 471     z-index: 10000;
 472     li {
 473         display: block;
 474         a {
 475             display: block;
 476             padding: 5px;
 477             color: @main_alt_colour;
 478             background-color: @menu_bg_colour;
 479             &:hover {
 480                 color: @bg_colour;
 481                 background-color: @main_alt_colour;
 482             }
 483             &.nav-sep {
 484                 border-top: 1px solid @bg_alt_colour; } } }
 485 }
 486 nav .nav-link {
 487     display: inline-block;
 488     .box(22px, 22px);
 489     overflow: hidden;
 490     margin: 0px 5px 5px;
 491     text-indent: 50px;
 492     background: transparent url(dark/icons.png) 0 0 no-repeat;
 493 }
 494 #nav-admin-link {
 495     background-position: 0 -154px;
 496     &:hover {
 497         background-position: -22px -154px;
 498     }
 499 }
 500 #nav-apps-link {
 501     background-position: 0 -66px;
 502     &:hover {
 503         background-position: -22px -66px;
 504     }
 505 }
 506 #nav-community-link,
 507 #nav-contacts-link {
 508     background-position: 0 -22px;
 509     &:hover {
 510         background-position: -22px -22px;
 511     }
 512 }
 513 #nav-directory-link {
 514     background-position: -44px -154px;
 515     &:hover {
 516         background-position: -66px -154px;
 517     }
 518 }
 519 #nav-help-link {
 520     background-position: 0 -110px;
 521     &:hover {
 522         background-position: -22px -110px;
 523     }
 524 }
 525 #nav-home-link {
 526     background-position: -44px -132px;
 527     &:hover {
 528         background-position: -66px -132px;
 529     }
 530 }
 531 #nav-intro-link {
 532     background-position: 0px -88px;
 533     &:hover {
 534         background-position: -22px -88px;
 535     }
 536 }
 537 #nav-login-link,
 538 #nav-logout-link {
 539     background-position: 0 -88px;
 540     &:hover {
 541         background-position: -22px -88px;
 542     }
 543 }
 544 #nav-manage-link {
 545     background-position: -88px -88px;
 546     &:hover {
 547         background-position: -110px -88px;
 548     }
 549 }
 550 #nav-messages-link {
 551     background-position: -44px -88px;
 552     &:hover {
 553         background-position: -66px -88px;
 554     }
 555 }
 556 #nav-notify-link,
 557 #nav-notifications-linkmenu {
 558     background-position: -44px -110px;
 559 }
 560 #nav-notify-link:hover {
 561     background-position: -66px -110px;
 562 }
 563 #nav-network-link {
 564     background-position: 0px -177px;
 565     &:hover {
 566         background-position: -22px -177px;
 567     }
 568 }
 569 #nav-search-link {
 570     background-position: 0 -44px;
 571     &:hover {
 572         background-position: -22px -44px;
 573     }
 574 }
 575 #jot-title,
 576 #profile-link,
 577 #profile-title,
 578 #profile-attach-wrapper,
 579 #profile-audio,
 580 #profile-link,
 581 #profile-location,
 582 #profile-nolocation,
 583 #profile-title,
 584 #profile-upload-wrapper,
 585 #profile-video,
 586 #profile-jot-submit,
 587 #wall-image-upload,
 588 #wall-file-upload,
 589 #wall-image-upload-div,
 590 #wall-file-upload-div,
 591 .icon,
 592 .hover,
 593 .focus,
 594 .pointer {
 595     cursor: pointer;
 596 }
 597 .sparkle {
 598     cursor: url("icons/sparkle.cur"), pointer;
 599 }
 600 //* popup notifications */
 601 div.jGrowl div {
 602     &.notice {
 603         background: @notice url("../../../images/icons/48/notice.png") no-repeat 5px center;
 604         color: white;
 605         padding-left: 58px;
 606         margin-top: 50px;
 607     }
 608     &.info {
 609         background: @info url("../../../images/icons/48/info.png") no-repeat 5px center;
 610         color: white;
 611         padding-left: 58px;
 612         margin-top: 50px;
 613     }
 614     // &.jGrowl-message {
 615
 616     // }
 617 }
 618 #nav-notifications-menu {
 619     margin: 30px 0 0 -20px;
 620     width: 275px;
 621     max-height: 300px;
 622     overflow-y: auto;
 623     font-size: 9pt;
 624     img {
 625         float: left;
 626         margin-right: 5px; }
 627     .notif-when {
 628         font-size: 0.8em;
 629         display: block; }
 630     li {
 631         word-wrap: normal;
 632         border-bottom: 1px solid black;
 633         &:hover {
 634             color: black; }
 635     }
 636     a:hover {
 637         color: black;
 638         text-decoration: underline;
 639     }
 640 }
 641 nav #nav-notifications-linkmenu {
 642     &.on .icon.s22.notify,
 643     &.selected .icon.s22.notify {
 644         // background-image: url("../../../images/icons/22/notify_on.png");
 645         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAUJcAAFCXAZtv64UAAAHuSURBVCjPbZPbTlNBFIYHLixXRIhEQGNRMUopJAJyAyZ4Z2l8B+XwEBqKtjwOp8oDIAJKIJFUjdFIQCUYrRytdyb0459ht8wG9rrYs9b618y/TsYEH4ZK4qRYYIdDybZOI7TKakIfVhrJ8J2i5IBNyV93/kaaBuv3oV3MgwCTPKGHPkkPA0xRUMBrOgN4AP0o6BseEpF2m3es0qJTFQneyvMhgDsC9tZprnEcGuOPeMcDLUpW3jlLxlDBmJTFY6gLvsVv8tyh9G7U3Z6mwtCuJAoiECSh/w1+8otmTjLqF2KDNsNzRY1bruV0o6rFFtc9S5USh5RRWvAYv4xX9dYPS8ur1oBQC4Y99m2uHriRNda5ErLdU1l3jCI2xdJ3XOYLX6kP2W6K2OF54Et84jN154F31d6ukKOG92pSbcjWLRrbRhVGLTZeOtXqX46LoQSHhJo3jOo3ESrdBQbljIRKNyXUiKHNNSXhTdbZiUzyT/WJ23Zn3BBFy+2u4ZHc1eV2N7EkxAvbbqMRmZOSlbE0g/uajRgl6Iy8r1wpnaFTQ4ji+8XOEsuxYmdDWpJleXJ0+BPdoduL4p5Vavd5IOllmJfiWmSWu6d3pV4jteFWqaAGbLkdKSqtUXXUnN3DSvF8phfy/JfkxfOp9sVb2COz+hY/T0qkwwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMS0wOS0xNlQwOTozOTowMCswMjowMC9Oi90AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTEtMDktMTZUMDk6Mzk6MDArMDI6MDBeEzNhAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==");
 646     }
 647 }
 648 .show {
 649     display: block;
 650 }
 651 #notifications {
 652     .box(170px, 20px);
 653     font-size: small;
 654     top: -19px;
 655     left: 4px;
 656     position: absolute;
 657 }
 658 #nav-floater {
 659     position: fixed;
 660     top: 20px;
 661     right: 1%;
 662     padding: 5px;
 663     background: @dk_bg_colour;
 664     color: transparent;
 665     .rounded_corners;
 666     z-index: 100;
 667     .box(270px, 60px);
 668 }
 669 #nav-buttons {
 670     clear: both;
 671     list-style: none;
 672     padding: 0px;
 673     margin: 0px;
 674     height: 25px;
 675     > li {
 676         padding: 0;
 677         display: inline-block;
 678         margin: 0px -4px 0px 0px;
 679     }
 680 }
 681 #nav-buttons-2 {
 682     clear: both;
 683     list-style: none;
 684     padding: 0px;
 685     margin: 0px;
 686     left: 136px;
 687     top: -20px;
 688     position: relative;
 689     .box(6em, 25px);
 690     > li {
 691         padding: 0;
 692         display: inline-block;
 693         margin: 0px -4px 0px 0px;
 694     }
 695 }
 696 .floaterflip {
 697     display: block;
 698     position: fixed;
 699     z-index: 110;
 700     top: 56px;
 701     right: 19px;
 702     .box(22px, 22px);
 703     overflow: hidden;
 704     margin: 0px;
 705     background: transparent url(dark/icons.png) -190px -60px no-repeat;
 706 }
 707 .search-box {
 708     display: inline-block;
 709     margin: 5px;
 710     position: fixed;
 711     right: 0px;
 712     bottom: 0px;
 713     z-index: 100;
 714     background: @dk_bg_colour;
 715     .rounded_corners;
 716 }
 717 #search-text,
 718 #mini-search-text {
 719     background: white;
 720     color: @bg_colour;
 721 }
 722 #search-text {
 723     .borders(1px, solid, @main_alt_colour);
 724     margin: 5px 0;
 725 }
 726 #mini-search-text {
 727     font-size: 8pt;
 728     height: 14px;
 729     width: 10em;
 730     margin: 5px;
 731 }
 732 #scrollup {
 733     position: fixed;
 734     right: 5px;
 735     bottom: 40px;
 736     z-index: 100;
 737     a:hover {
 738         text-decoration: none;
 739         border: 0;
 740     }
 741 }
 742 #user-menu {
 743     .box_shadow(5px, 0, 10px, 0);
 744     display: block;
 745     width: 35%;
 746     margin: 5px 0 0 0;
 747     position: relative;
 748     .rounded_corners;
 749     background-color: @menu_bg_colour;
 750     background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAIAAwDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMH/8QAIhAAAQMEAgIDAAAAAAAAAAAAAQIDBAAFBhESIQdBMVFh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/xAAXEQEBAQEAAAAAAAAAAAAAAAABAAIR/9oADAMBAAIRAxEAPwCXiHO8dbsEi35BEhIehNlbUhxhBU82O+G9bKgToD2D+VlmZX9OWZBJuAiMxGlni0w0gJCED4HXv7pSi6eFML//2Q==");
 751     background-position: 98% center;
 752     background-repeat: no-repeat;
 753 /*  clear: both;*/
 754     top: 4px;
 755     left: 7px;
 756     padding: 2px;
 757     > a {
 758         vertical-align: top;
 759         outline: 0 none;
 760     }
 761 }
 762 #user-menu-label {
 763     font-size: small;
 764     padding: 0px 20px 10px 5px;
 765     height: 10px;
 766     display: block;
 767 }
 768 .nav-ajax-update,
 769 .nav-ajax-left {
 770     .box(30px, 19px);
 771     background: transparent url(dark/notifications.png) 0 0 no-repeat;
 772     color: @shadow_colour;
 773     font-weight: bold;
 774     font-size: 0.8em;
 775     padding-top: 0.2em;
 776     text-align: center;
 777     float: left;
 778     margin: 0 -1px 0 3px;
 779     display: block;
 780     visibility: hidden;
 781 }
 782 .nav-ajax-update.show,
 783 .nav-ajax-left.show {
 784     visibility: visible;
 785 }
 786 #net-update {
 787     background-position: 0px 0px;
 788 }
 789 #mail-update {
 790     background-position: -30px 0;
 791 }
 792 #notify-update {
 793     background-position: -60px 0px;
 794 }
 795 #home-update {
 796     background-position: -90px 0px;
 797 }
 798 #intro-update {
 799     background-position: -120px 0px;
 800 }
 801
 802 .menu-popup {
 803     position: absolute;
 804     display: none;
 805     // width: 11em;
 806     background: white;
 807     color: @bg_colour;
 808     margin: 0px;
 809     padding: 0px;
 810     font-size: small;
 811     line-height: 1.2;
 812     .borders(3px, solid, @link_colour);
 813     .rounded_corners;
 814     z-index: 100000;
 815     .box_shadow;
 816     a {
 817         display: block;
 818         color: @bg_colour;
 819         padding: 5px 10px;
 820         text-decoration: none;
 821         &:hover {
 822             color: @main_colour;
 823             background-color: @link_colour;
 824         }
 825     }
 826     .menu-sep {
 827         border-top: 1px solid @med_bg_colour;
 828     }
 829     li {
 830         float: none;
 831         overflow: auto;
 832         height: auto;
 833         display: block;
 834         img {
 835             float: left;
 836             .box(16px, 16px);
 837             padding-right: 5px;
 838         }
 839     }
 840     .empty {
 841         padding: 5px;
 842         text-align: center;
 843         color: lighten(@shiny_colour, 45%);
 844     }
 845 }
 846 .notif-item {
 847     font-size: small;
 848     a {
 849         vertical-align: middle;
 850     }
 851 }
 852 .notif-image {
 853     .box(32px, 32px);
 854     padding: 7px 7px 0px 0px;
 855 }
 856 .notify-seen {
 857     background: @disabled_colour;
 858     color: @main_colour;
 859 }
 860 .notify-unseen {
 861     color: @main_colour;
 862 }
 863
 864
 865 /**
 866  * sysmsg
 867  */
 868 #sysmsg_info {
 869     position: fixed;
 870     bottom: 0;
 871     .box_shadow(@main_shadow);
 872     padding: 10px;
 873     background-color: @lt_orange;
 874     .borders(2px, solid, @orange);
 875     border-bottom: 0;
 876     padding-bottom: 50px;
 877     z-index: 1000;
 878 }
 879 #sysmsg {
 880     position: fixed;
 881     bottom: 0;
 882     .box_shadow(@main_shadow);
 883     padding: 10px;
 884     background-color: @lt_orange;
 885     .borders(2px, solid, @orange);
 886     border-bottom: 0;
 887     padding-bottom: 50px;
 888     z-index: 1000;
 889 }
 890 #sysmsg_info br,
 891 #sysmsg br {
 892     display: block;
 893     margin: 2px 0px;
 894     border-top: 1px solid @main_colour;
 895 }
 896
 897
 898 /**
 899  * aside
 900  */
 901 #asidemain {
 902     float: left;
 903     font-size: small;
 904     margin: 1em;
 905     width: 25%;
 906     display: inline;
 907 }
 908 /* for now, disappear these */
 909 #asideright, #asideleft {
 910     display: none;
 911 }
 912 .vcard {
 913     .fn {
 914         font-size: 1.5em;
 915         font-weight: bold;
 916         border-bottom: 1px solid @hover_colour;
 917         padding-bottom: 3px;
 918     }
 919     #profile-photo-wrapper {
 920         margin: 20px 0;
 921         background-color: @menu_bg_colour;
 922         padding: 5px;
 923         .box(175px, 175px);
 924         .rounded_corners;
 925         .box_shadow(3px, 3px, 10px, 0);
 926     }
 927 }
 928 #asidemain {
 929     h4 {
 930         font-size: 1.2em; }
 931     #viewcontacts {
 932         text-align: right;
 933     }
 934     #contact-block {
 935         width: 99%;
 936         .contact-block-content {
 937             width: 99%;
 938             .contact-block-div {
 939                 float: left;
 940                 margin: 0 5px 5px 0;
 941                 .box(50px, 50px);
 942                 padding: 3px;
 943                 position: relative; } } }
 944 }
 945 .aprofile dt {
 946     background: @main_colour;
 947     color: @bg_colour;
 948     font-weight: bold;
 949     .box_shadow(3px, 3px, 5px);
 950     .rounded_corners;
 951     margin: 15px 0 5px;
 952     padding-left: 5px;
 953 }
 954 #profile-extra-links ul {
 955     margin-left: 0px;
 956     padding-left: 0px;
 957     list-style: none;
 958 }
 959 #dfrn-request-link {
 960     .rounded_corners;
 961     color: @main_colour;
 962     display: block;
 963     font-size: 1.2em;
 964     padding: 0.2em 0.5em;
 965     background-color: @friendica_blue;
 966     // background-image: url(icons/connect.png);
 967     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE4SURBVCiRpZKxLgRRFIa//64dKruZFRIlolBviFKiVHsHrRaFikTCC+hEQtRegMQDqDUKJOPOvauSMJmjYEU2M0viT071/+fLOTlHZkadQgjLkh1LPEoj661WKw5mXG034JxtAgtmrJoVK5WZYYCy1AVQSOYbjeSqMmRmQ8v755Ne77lb5w+d4HMNJopCT7X+bwDQZKfTyf4BIAHeawHe+/kQ/FGM+QagvpFl2VSM/tyMmV7PV14AYMQ5nUp0AULIp0HXzpVvSdLYMmNVAjNdAuNAUQHgxy/ZvEQTSMw0A33DxkIIi2ma3gwC9PKSzRWF2wbdpml62DfyPF9yjlNgAnQGLJjZnXON3Xa7ff8NGPbKQPNrbAOI0a9J2ilLEzAL7P0GqJJizF+BUeDhL2cclJnZPvAg6eADf+imKjSMX1wAAAAASUVORK5CYII=");
 968     background-repeat: no-repeat;
 969     background-position: 95% center;
 970 }
 971 #wallmessage-link {
 972     ///*background: #3465A4 url(dark/connect.png) no-repeat 95% center;*/
 973     ///*border-radius: 5px 5px 5px 5px;*/
 974     color: @main_alt_colour;
 975     display: block;
 976     font-size: 1.2em;
 977     padding: 0.2em 0.5em;
 978 }
 979 .ttright {
 980     margin: 0px;
 981 }
 982
 983
 984 /**
 985  * contacts block
 986  */
 987 .contact-block-div {
 988     .box(50px, 50px);
 989     float: left;
 990 }
 991 .contact-block-textdiv {
 992     .box(150px, 34px);
 993     float: left;
 994 }
 995
 996
 997 /**
 998  * jot
 999  */
1000 #jot {
1001     margin: 10px 0 20px 0px;
1002     width: 100%;
1003     #jot-tools {
1004         margin: 0px;
1005         padding: 0px;
1006         .box(100%, 35px);
1007         overflow: none;
1008         span {
1009             float: left;
1010             margin: 10px 20px 2px 0px;
1011             a {
1012                 display: block;
1013             }
1014         }
1015         .perms {
1016             float: right;
1017             width: 40px;
1018         }
1019         li.loading {
1020             float: right;
1021             background-color: white;
1022             .box(20px, 38px);
1023             vertical-align: center;
1024             text-align: center;
1025             border-top: 2px solid #9eabb0;
1026             img {
1027                 margin-top: 10px;
1028             }
1029         }
1030     }
1031     #jot-title {
1032         .borders(1px, solid, darken(@main_alt_colour, 13%));
1033         margin: 0 0 5px;
1034         .box(90%, 20px);
1035         font-weight: bold;
1036         .rounded_corners;
1037         vertical-align: middle;
1038     }
1039 }
1040 #jot-category {
1041     margin: 5px 0;
1042     .rounded_corners;
1043     .borders(1px, solid, darken(@main_alt_colour, 33%));
1044     color: darken(@main_alt_colour, 27%);
1045     font-size: smaller;
1046     &:focus {
1047         color: @main_alt_colour;
1048     }
1049 }
1050 #jot #character-counter {
1051     .box(6%, 15px);
1052     float: right;
1053     text-align: right;
1054     line-height: 20px;
1055     padding: 2px 20px 5px 0;
1056 }
1057 #profile-jot-text_parent {
1058     .box_shadow(5px, 0, 10px, 0);
1059 }
1060 #profile-jot-text_tbl {
1061     margin-bottom: 10px;
1062     background: darken(@main_alt_colour, 46.8%);
1063 }
1064 #profile-jot-text_ifr {
1065     width: 99.900002% !important;
1066 }
1067 #profile-jot-text_toolbargroup, .mceCenter tr {
1068     background: darken(@main_alt_colour, 46.8%);
1069 }
1070 [id$="jot-text_ifr"] {
1071     // width: 99.900002% !important;
1072     color: @bg_colour;
1073     background: @main_colour;
1074     .mceContentBody {
1075         color: @bg_colour;
1076         background: @main_colour;
1077     }
1078 }
1079 .defaultSkin {
1080     tr.mceFirst {
1081         background: darken(@main_alt_colour, 46.8%);
1082     }
1083     td {
1084         &.mceFirst, &.mceLast {
1085             background-color: @main_colour;
1086         }
1087     }
1088     span.mceIcon, img.mceIcon, .mceButtonDisabled .mceIcon {
1089         background-color: @main_colour;
1090     }
1091 }
1092 #profile-attach-wrapper,
1093 #profile-audio-wrapper,
1094 #profile-link-wrapper,
1095 #profile-location-wrapper,
1096 #profile-nolocation-wrapper,
1097 #profile-title-wrapper,
1098 #profile-upload-wrapper,
1099 #profile-video-wrapper {
1100     float: left;
1101     margin: 0 20px 0 0;
1102 }
1103 #profile-rotator-wrapper {
1104     float: right;
1105 }
1106 #profile-jot-email-wrapper {
1107     margin: 10px 10% 0;
1108     .borders(1px, solid, @menu_bg_colour);
1109     border-bottom: 0;
1110 }
1111 #profile-jot-email-label {
1112     background-color: @menu_bg_colour;
1113     color: @main_colour;
1114     padding: 5px;
1115 }
1116 #profile-jot-email {
1117     width: 90%;
1118     margin: 5px;
1119 }
1120 #profile-jot-networks {
1121     margin: 0 10%;
1122     border: 1px solid @menu_bg_colour;
1123     border-top: 0;
1124     border-bottom: 0;
1125     padding: 5px;
1126 }
1127 #profile-jot-net {
1128     margin: 5px 0;
1129 }
1130 #jot-preview-link {
1131     margin: 0 0 0 10px;
1132     border: 0;
1133     text-decoration: none;
1134     float: right;
1135 }
1136 .icon-text-preview {
1137     margin: 0 0 -18px 0;
1138     display: block;
1139     .box(20px, 20px);
1140     background: url(dark/icons.png) no-repeat -128px -40px;
1141     border: 0;
1142     text-decoration: none;
1143     float: right;
1144     cursor: pointer;
1145 }
1146 #profile-jot-perms {
1147     float: right;
1148     color: @menu_bg_colour;
1149     .box(20px, 20px);
1150     .rounded_corners;
1151     .box_shadow(3px, 3px, 5px, 0);
1152     .borders(2px, outset, @menu_bg_colour);
1153     overflow: hidden;
1154     margin: 0 10px 0 10px;
1155 }
1156 #profile-jot-plugin-wrapper {
1157     width: 1px;
1158     margin: 10px 0 0 0;
1159     float: right;
1160 }
1161 #profile-jot-submit-wrapper {
1162     float: right;
1163     width: 100%;
1164     margin: 10px 0 0 0;
1165     padding: 0;
1166 }
1167 #profile-jot-submit {
1168     height: auto;
1169     background-color: @menu_bg_colour;
1170     color: @main_alt_colour;
1171     .rounded_corners;
1172     .borders(2px, outset, @shiny_colour);
1173     margin: 0;
1174     float: right;
1175     .text_shadow;
1176     width: auto;
1177     &:active {
1178         .box_shadow(0, 0, 0, 0);
1179     }
1180 }
1181 #jot-perms-icon {
1182     .box(22px, 22px);
1183     .rounded_corners;
1184     overflow: hidden;
1185     background: @menu_bg_colour url("dark/icons.png") -88px -40px;
1186 }
1187 #group_allow_wrapper,
1188 #group_deny_wrapper,
1189 #acl-permit-outer-wrapper,
1190 #contact_allow_wrapper,
1191 #contact_deny_wrapper,
1192 #acl-deny-outer-wrapper {
1193     width: 47%;
1194 }
1195 #group_allow_wrapper,
1196 #group_deny_wrapper,
1197 #acl-permit-outer-wrapper {
1198     float: left;
1199 }
1200 #contact_allow_wrapper,
1201 #contact_deny_wrapper,
1202 #acl-deny-outer-wrapper {
1203     float: right;
1204 }
1205 #acl-permit-text {
1206     background-color: darken(@main_alt_colour, 60%);
1207     color: @main_colour;
1208     padding: 5px;
1209     float: left;
1210 }
1211 #jot-public {
1212     background-color: darken(@main_alt_colour, 60%);
1213     color: @alert;
1214     padding: 5px;
1215     float: left;
1216 }
1217 #acl-deny-text {
1218     background-color: darken(@main_alt_colour, 60%);
1219     color: @main_colour;
1220     padding: 5px;
1221     float: left;
1222 }
1223 #jot-title-desc {
1224     color: darken(@main_alt_colour, 13%);
1225 }
1226 #profile-jot-desc {
1227     background: @bg_colour;
1228     .borders;
1229     .rounded_corners;
1230     color: @red_orange;
1231     margin: 5px 0;
1232 }
1233 #jot-title-wrapper {
1234     margin-bottom: 5px;
1235 }
1236 #jot-title-display {
1237     font-weight: bold;
1238 }
1239 .jothidden {
1240     display: none;
1241 }
1242 #jot-preview-content {
1243     background-color: @shiny_colour;
1244     color: @main_colour;
1245     .borders(1px, solid, @bg_colour);
1246     .rounded_corners;
1247     .box_shadow(5px, 0, 10px);
1248     padding: 3px 3px 6px 10px;
1249     margin: 5em auto 1em;
1250     .wall-item-outside-wrapper {
1251         border: 0;
1252         .rounded_corners(0px 0px 0px 0px);
1253         .box_shadow(0, 0, 0, 0);
1254     }
1255 }
1256
1257
1258 /**
1259  * section
1260  */
1261 #sectionmain {
1262     margin: 1em;
1263     font-size: 0.8em;
1264     min-width: 475px;
1265     width: 69%;
1266     float: left;
1267     display: inline;
1268 }
1269
1270
1271 /**
1272  * tabs
1273  */
1274 .tabs {
1275     .list_reset;
1276     margin: 10px 0;
1277     li {
1278         display: inline;
1279         font-size: smaller;
1280     }
1281 }
1282 .multibutton () {
1283     .borders(1px, solid, @hover_colour);
1284     padding: 4px;
1285     .rounded_corners;
1286     &:active,
1287     &:hover {
1288         background: @shiny_colour;
1289         color: @main_colour;
1290         .borders(1px, solid, @hover_colour);
1291     }
1292     a {
1293         border: 0;
1294         text-decoration: none;
1295     }
1296 }
1297 .multibutton_active () {
1298     background: @main_colour;
1299     color: @bg_colour;
1300     .borders(1px, solid, @hover_colour);
1301     padding: 4px;
1302     .rounded_corners;
1303     &:hover {
1304         background: @shiny_colour;
1305         color: @main_colour;
1306         .borders(1px, solid, @hover_colour);
1307     }
1308     a {
1309         color: @bg_colour;
1310         text-decoration: none;
1311     }
1312 }
1313 .tab {
1314     .multibutton;
1315 }
1316 .tab {
1317     &.active {
1318         .multibutton_active;
1319     }
1320 }
1321
1322
1323 /**
1324  * items
1325  */
1326 .wall-item-outside-wrapper {
1327     .borders(1px, solid, darken(@main_alt_colour, 27%));
1328     .rounded_corners;
1329     .box_shadow(6px, 1px, 10px, -2px);//@lt_shadow_colour
1330     &.comment {
1331         margin-top: 5px;
1332     }
1333 }
1334 .wall-item-content-wrapper {
1335     position: relative;
1336     padding: 0.75em;
1337     width: auto;
1338 }
1339 .wall-item-outside-wrapper .wall-item-comment-wrapper {
1340     /*margin-left: 90px;*/
1341     .preview {
1342         border: 0;
1343         .rounded_corners(0px);
1344     }
1345 }
1346 .shiny {
1347     background: @shiny_colour;
1348     .rounded_corners;
1349 }
1350 .wall-outside-wrapper .shiny {
1351     .rounded_corners;
1352 }
1353 .heart {
1354     color: red;
1355 }
1356 .wall-item-content {
1357     overflow-x: auto;
1358     margin: 0px 4em 1em 5px;
1359 }
1360 [id^="tread-wrapper"],
1361 [class^="tread-wrapper"] {
1362     margin: 1.2em 0 0 0;
1363     padding: 0px;
1364 }
1365 .wall-item-photo-menu {
1366     display: none;
1367 }
1368 .wall-item-photo-menu-button {
1369     display: none;
1370     text-indent: -99999px;
1371     background: @menu_bg_colour url(dark/menu-user-pin.jpg) no-repeat 75px center;
1372     position: absolute;
1373     overflow: hidden;
1374     .box(90px, 20px);
1375     top: 85px;
1376     left: 0;
1377     .rounded_corners(0 0 5px 5px);
1378 }
1379 .wall-item-info {
1380     float: left;
1381     width: 7em;
1382     position: relative;
1383 }
1384 .wall-item-photo-wrapper {
1385     .box(80px, 80px);
1386     position: relative;
1387     padding: 5px;
1388     background-color: @menu_bg_colour;
1389     .rounded_corners;
1390 }
1391 [class^="wall-item-tools"] * {
1392     /*margin: 0 0 5px 0;*/
1393     > * {
1394         /*margin: 0 0 5px 0;*/
1395     }
1396 }
1397 .wall-item-tools {
1398     float: right;
1399     opacity: 0.4;
1400     .transition;
1401     &:hover {
1402         opacity: 1;
1403         .transition;
1404     }
1405 }
1406 .wall-item-subtools1 {
1407     .box(30px, 30px);
1408     list-style: none outside none;
1409     margin: 18px 0 30px -20px;
1410     padding: 0;
1411 }
1412 .wall-item-subtools2 {
1413     .box(25px, 25px);
1414     list-style: none outside none;
1415     margin: -78px 0 0 5px;
1416     padding: 0;
1417 }
1418 .wall-item-title {
1419     font-size: 1.2em;
1420     font-weight: bold;
1421     margin-bottom: 1.4em;
1422 }
1423 .wall-item-body {
1424     margin: 1em;
1425     text-align: left;
1426     overflow-x: auto;
1427 }
1428 .wall-item-lock-wrapper {
1429     float: right;
1430     .box(22px, 22px);
1431     margin: 0 -5px 0 0;
1432     opacity: 1;
1433 }
1434 .wall-item-dislike,
1435 .wall-item-like {
1436     clear: left;
1437     font-size: 0.8em;
1438     color: lighten(@menu_bg_colour, 20%);
1439     margin: 5px 0 5px 10.2em;
1440     .transition;
1441     opacity: 0.5;
1442     &:hover {
1443         opacity: 1;
1444     }
1445 }
1446 .wall-item-author,
1447 .wall-item-actions-author,
1448 .wall-item-ago {
1449     color: @main_colour;
1450     line-height: 1;
1451     display: inline-block;
1452     font-size: x-small;
1453     margin: 0.5em auto;
1454     font-weight: bold;
1455 }
1456 .comment-edit-preview {
1457     width: auto;
1458     margin: auto auto auto -2em;
1459     &.wall-item-author,
1460     &.wall-item-actions-author,
1461     &.wall-item-ago {
1462         font-size: smaller;
1463     }
1464 }
1465 .wall-item-location {
1466     margin-top: 2em;
1467     width: 6em;
1468     overflow: hidden;
1469     .text_overflow;
1470     .icon {
1471         float: left;
1472     }
1473     > a,
1474     .smalltext {
1475         margin-left: 25px;
1476         font-size: 0.7em;
1477         display: block;
1478     }
1479     > br {
1480         display: none;
1481     }
1482 }
1483 .wallwall {
1484     .wwto {
1485         left: 5px;
1486         margin: 0;
1487         position: absolute;
1488         top: 75px;
1489         z-index: 10001;
1490         .box(30px, 30px);
1491         img {
1492             width: 30px !important;
1493             height: 30px !important;
1494         }
1495     }
1496     .wall-item-photo-end {
1497         clear: both;
1498     }
1499 }
1500 .wall-item-arrowphoto-wrapper {
1501     position: absolute;
1502     left: 35px;
1503     top: 80px;
1504     z-index: 10002;
1505 }
1506 .wall-item-photo-menu {
1507     min-width: 92px;
1508     font-size: 0.75em;
1509     .borders(2px, solid, @menu_bg_colour);
1510     border-top: 0px;
1511     background: @menu_bg_colour;
1512     position: absolute;
1513     left: -2px;
1514     top: 101px;
1515     display: none;
1516     z-index: 10003;
1517     .rounded_corners(0 5px 5px 5px);
1518     li a {
1519         white-space: nowrap;
1520         display: block;
1521         padding: 5px 6px;
1522         color: @main_alt_colour;
1523         &:hover {
1524             color: @menu_bg_colour;
1525             background: @main_alt_colour;
1526         }
1527     }
1528 }
1529 #connect-services-header,
1530 #extra-help-header {
1531     margin: 1.5em 0 0 0;
1532 }
1533 #connect-services,
1534 #extra-help {
1535     .list_reset;
1536     margin: 1em 0 0 0;
1537     li {
1538         display: inline;
1539     }
1540 }
1541
1542
1543 /**
1544  * comment
1545  */
1546 .ccollapse-wrapper {
1547     font-size: 0.9em;
1548     margin-left: 5em;
1549 }
1550 .hide-comments-outer {
1551     font-size: small;
1552 }
1553 .wall-item-outside-wrapper.comment {
1554     margin-left: 5em;
1555     .wall-item-info {
1556         width: 5em;
1557     }
1558     .wall-item-photo {
1559         width: 40px !important;
1560         height: 40px !important;
1561     }
1562     .wall-item-photo-wrapper {
1563         .box(40px, 40px);
1564     }
1565     .wall-item-photo-menu-button {
1566         width: 3.35em;
1567         top: 3.2em;
1568         background-position: 35px center;
1569     }
1570     .wall-item-author {
1571         margin-left: 0.2em;
1572     }
1573     .wall-item-photo-menu {
1574         min-width: 4.5em;
1575         top: 5.5em;
1576     }
1577 }
1578 .comment-wwedit-wrapper {
1579     .borders(1px, solid, @main_colour);
1580     .rounded_corners;
1581     margin: 5px;
1582 }
1583 .comment-edit-wrapper {
1584     border-top: 1px #aaa solid;
1585 }
1586 [class^="comment-edit-bb"] {
1587     .list_reset;
1588     display: none;
1589     margin: -40px 0 5px 60px;
1590     width: 75%;
1591     > li {
1592         display: inline-block;
1593         margin: 0 10px 0 0;
1594         visibility: none;
1595     }
1596 }
1597 .comment-wwedit-wrapper img,
1598 .comment-edit-wrapper img {
1599     .box;
1600 }
1601 .comment-edit-photo-link,
1602 .comment-edit-photo {
1603     margin-left: 10px;
1604 }
1605 .my-comment-photo {
1606     .box(40px, 40px);
1607     padding: 5px;
1608 }
1609 [class^="comment-edit-text"] {
1610     margin: 5px 0 10px 20px;
1611     width: 94%;
1612 }
1613 .comment-edit-text-empty {
1614     height: 20px;
1615     .med_borders;
1616     .rounded_corners;
1617     color: @med_border_colour;
1618     .transition;
1619     &:hover {
1620         color: darken(@main_alt_colour, 33.5%);
1621     }
1622 }
1623 .comment-edit-text-full {
1624     height: 10em;
1625     .rounded_corners;
1626     .transition;
1627 }
1628 .comment-edit-submit-wrapper {
1629     width: 90%;
1630     margin: 5px 5px 10px 50px;
1631     text-align: right;
1632 }
1633 .comment-edit-submit {
1634     height: 22px;
1635     background-color: @menu_bg_colour;
1636     color: @main_alt_colour;
1637     .rounded_corners;
1638     border: 0;
1639 }
1640
1641
1642 /**
1643  * item text style
1644  */
1645 .wall-item-body code {
1646     background-color: darken(@main_alt_colour, 66.5%);
1647     border-bottom: 1px dashed darken(@main_alt_colour, 13.5%);
1648     border-left: 5px solid darken(@main_alt_colour, 13.5%);
1649     border-top: 1px dashed darken(@main_alt_colour, 13.5%);
1650     color: @main_colour;
1651     display: block;
1652     overflow-x: auto;
1653     padding: 5px 0 15px 10px;
1654     width: 95%;
1655     a {
1656         color: @lt_link_colour;
1657     }
1658 }
1659
1660
1661 /**
1662  * profile
1663  */
1664 div {
1665     &[id$="text"] {
1666         font-weight: bold;
1667         border-bottom: 1px solid darken(@main_alt_colour, 13.5%);
1668     }
1669     &[id$="wrapper"] {
1670         height: 100%;
1671         br {
1672             clear: left;
1673         }
1674     }
1675 }
1676 .profile-match-wrapper {
1677     float: left;
1678     margin: 0 5px 40px 0;
1679     .box(120px, 120px);
1680     padding: 3px;
1681     position: relative;
1682 }
1683 .icon.drophide.profile-match-ignore {
1684     margin: 0 6px 0 -3px;
1685 }
1686 .profile-match-photo {
1687
1688 }
1689 [id$="-end"], [class$="-end"] {
1690     clear: both;
1691     margin: 0 0 10px 0;
1692 }
1693 .profile-match-end {
1694     margin: 0 0 5px 0;
1695 }
1696 .profile-match-name {
1697     font-weight: bold;
1698     margin: auto auto auto 23px;
1699 }
1700 .profile-match-connect {
1701     font-style: italic;
1702     margin: auto auto auto 23px;
1703 }
1704 #advanced-profile-with {
1705     margin-left: 200px;
1706 }
1707
1708
1709 /**
1710  * photos
1711  */
1712 .photos {
1713     height: auto;
1714     overflow: auto;
1715 }
1716 #photo-top-links {
1717     margin-bottom: 30px;
1718 }
1719 .photo-album-image-wrapper,
1720 .photo-top-image-wrapper {
1721     float: left;
1722     .box_shadow(3px, 3px, 10px, 0);
1723     background-color: darken(@main_alt_colour, 80%);
1724     color: @bg_colour;
1725     .rounded_corners;
1726     padding-bottom: 30px;
1727     position: relative;
1728     margin: 0 10px 10px 0;
1729 }
1730 #photo-photo {
1731     margin: auto auto 5em 20%;
1732     img {
1733         max-width: 50%;
1734     }
1735 }
1736 .photo-top-image-wrapper a:hover,
1737 #photo-photo a:hover,
1738 .photo-album-image-wrapper a:hover {
1739     border-bottom: 0;
1740 }
1741 .photo-top-photo,
1742 .photo-album-photo {
1743     .rounded_corners(5px 5px 0 0);
1744 }
1745 .photo-top-album-name,
1746 .caption {
1747     position: absolute;
1748     bottom: 0;
1749     padding: 0 5px;
1750 }
1751 #photo-prev-link,
1752 #photo-next-link {
1753     position: absolute;
1754     // .box(30%, 100%);
1755     .box(50px, 200px);
1756     background: white center center no-repeat;
1757     opacity: 0;
1758     .transition(all, 0.5s);
1759     z-index: 10;
1760     top: 15em;
1761     .rounded_corners;
1762     &:hover {
1763         opacity: 0.6;
1764         .transition(all, 0.5s);
1765     }
1766     .icon {
1767         display: none;
1768     }
1769 }
1770 #photo-prev-link {
1771     // background-image: url(dark/prev.png);
1772     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAnCAMAAADTjiM/AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAALpQTFRF////AAAAQEBAZmZmVVVVSUlJTU1NXV1dVVVVTk5OW1tbWlpaWFhPWFhQU1pTVVVVVlZSVVlRVlZTVFdUVFdUVVdTVFZSVldUVldSVldSVldTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVZUVVdTVVdTVVhSVVdTVVdTVVhSVVdTVVdTVVhSVVdTVVdTVVdTVVdTVVdTVVdTVVhTVVdTVVdTVVdTVVdT3XYY/AAAAD10Uk5TAAEEBQYHCgsMDQ4RHSAlP0FFR1hee3+JnqSqq6ytrq+wsbKztLW2t7y9vr/AwcLDxMXGx8jU1dng7O/3+TmOwVsAAADASURBVCjPddPXEoIwEAXQINh7Q8WKYu+95v9/S0dxZxNy83hgMpvdu0Jox642r25GVxGfys+5540sZV3jyY/lWeVxyDLg7AR/lhXOI+KZZeRFgvGQeMnY9olXScYD4jXnPvHGzNsU4x7xjnGsa+YO8T7NnukRHzgXiY/KNKiUkzqkZ8ivnDoKD/xfBvdbbXM9sH70Xtgf2E/YfzgvOF+YB5gf5cPcAfmsgTy3QP5vYF8akf36XvXIRhZPlPyLWxBvNENWsZXDKukAAAAASUVORK5CYII=");
1773     left: 5%;
1774 }
1775 #photo-next-link {
1776     // background-image: url(dark/next.png);
1777     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAnCAMAAADTjiM/AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAKVQTFRF////gICAQEBAZmZmVVVVSUlJYGBgVVVVTU1NXV1dVVVVWVlZU1hTVlZSVlZTVlZTVVlRVVhSVFdUVlhTVVdTVFZTVVdTVldTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVhSVVdTVVdTVVdTVVdTVVdTVVdTVVdTVVdTVVdT8E3YQQAAADZ0Uk5TAAIEBQYHCAkKCwwUN0FER0hOW2uNjqWqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCxcjT3PP3B0dhfwAAANlJREFUKM910+cSgjAQRtEIomAXu4iIYge7ef9Hs+ZzN4b9eW4mk1kGIaqdU9wQf2Nf5XPSiu4d+Z6jp/n54/KghZ40h5ZymbFQGCCkLg3WKC+MEfYs2AHCrszCBGHLQ5gXpggbFooRwrrEwgxhxUOcE5w5wtJiYYHQZjt0EuUhX3r19vU7Y++ozgeMD7i/buYhYTcDj8gz3RQ8prwHB/aPyzvwhPLWzBtwSLi0Bk8pr8BR0cgzwiIycw0cUxZ9xXOH7VZ9vAVn4X840Vh4F9Pp1w/gZ92mpesDuLpM+1blc68AAAAASUVORK5CYII=");
1778     left: 50%;
1779 }
1780 #photo-prev-link a,
1781 #photo-next-link a {
1782     display: block;
1783     .box(100%, 100%);
1784     .rounded_corners;
1785     overflow: hidden;
1786     text-indent: -900000px;
1787 }
1788 #photos-upload-spacer,
1789 #photos-upload-new-wrapper,
1790 #photos-upload-exist-wrapper {
1791     margin-bottom: 1em;
1792 }
1793 #photos-upload-existing-album-text,
1794 #photos-upload-newalbum-div {
1795     background-color: @menu_bg_colour;
1796     color: @main_alt_colour;
1797     padding: 1px;
1798 }
1799 #photos-upload-album-select,
1800 #photos-upload-newalbum {
1801     width: 99%;
1802 }
1803 #photos-upload-perms-menu {
1804     text-align: right;
1805 }
1806 #photo-edit-caption,
1807 #photo-edit-newtag,
1808 #photo-edit-albumname {
1809
1810 }
1811 #photo-edit-link-wrap {
1812     margin-bottom: 15px;
1813 }
1814 #photo-edit-caption,
1815 #photo-edit-newtag {
1816
1817 }
1818 #photo-edit-perms {
1819     width: auto;
1820 }
1821 #photo-edit-rotate-label {
1822     .label;
1823 }
1824 #photo-like-div {
1825     float: left;
1826     margin: auto 0 0;
1827     width: 2em;
1828     .rounded_corners;
1829     .borders;
1830 }
1831 .wall-item-like-buttons {
1832     > * {
1833         display: inline;
1834     }
1835 }
1836 #photo-edit-delete-button {
1837     margin: auto auto auto 1em;
1838 }
1839 #photo-edit-end {
1840     margin-bottom: 35px;
1841 }
1842 #photo-caption {
1843     font-size: 110%;
1844     font-weight: bold;
1845     margin-top: 15px;
1846     margin-bottom: 15px;
1847 }
1848 #wall-photo-container {
1849     margin: 0 auto 1em 4em;
1850     width: 90%;
1851 }
1852
1853
1854 /**
1855  * message
1856  */
1857 .prvmail-text {
1858     width: 100%;
1859 }
1860 #prvmail-subject {
1861     width: 100%;
1862     color: @bg_colour;
1863     background: @main_colour;
1864 }
1865 #prvmail-submit-wrapper {
1866     margin-top: 10px;
1867 }
1868 #prvmail-submit {
1869     float: right;
1870     margin-top: 0;
1871 }
1872 #prvmail-submit-wrapper div {
1873     margin-right: 5px;
1874     float: left;
1875 }
1876 .mail-list-outside-wrapper {
1877     margin-top: 20px;
1878 }
1879 .mail-list-sender {
1880     float: left;
1881 }
1882 .mail-list-detail {
1883     margin-left: 90px;
1884 }
1885 .mail-list-sender-name {
1886     display: inline;
1887     font-size: 1.1em;
1888 }
1889 .mail-list-date {
1890     display: inline;
1891     font-size: 0.9em;
1892     padding-left: 10px;
1893 }
1894 .mail-list-sender-name,
1895 .mail-list-date {
1896     font-style: italic;
1897 }
1898 .mail-list-subject {
1899     font-size: 1.2em;
1900 }
1901 .mail-list-delete-wrapper {
1902     float: right;
1903 }
1904 .mail-list-outside-wrapper-end {
1905     clear: both;
1906     border-bottom: 1px @main_colour dotted;
1907 }
1908 .mail-conv-sender {
1909     float: left;
1910     margin: 0px 5px 5px 0px;
1911 }
1912 .mail-conv-sender-photo {
1913     .box(32px, 32px)
1914 }
1915 .mail-conv-sender-name {
1916     float: left;
1917 }
1918 .mail-conv-date {
1919     float: right;
1920 }
1921 .mail-conv-subject {
1922     clear: right;
1923     font-weight: bold;
1924     font-size: 1.2em;
1925 }
1926 .mail-conv-body {
1927     clear: both;
1928 }
1929 .mail-conv-delete-wrapper {
1930     margin-top: 5px;
1931 }
1932
1933
1934 /**
1935  * contacts
1936  */
1937 .view-contact-wrapper,
1938 .contact-entry-wrapper {
1939     float: left;
1940     margin: 0 5px 40px 0;
1941     .box(120px, 135px);
1942     padding: 3px;
1943     position: relative;
1944 }
1945 .contact-direction-wrapper {
1946     position: absolute;
1947     top: 20px;
1948 }
1949 .contact-edit-links {
1950     position: absolute;
1951     top: 60px;
1952 }
1953 .contact-entry-photo-wrapper {}
1954 .contact-entry-photo {
1955     margin-left: 20px;
1956 }
1957 .contact-entry-name {
1958     width: 120px;
1959     font-weight: bold;
1960     font-size: small;
1961 }
1962 .contact-entry-details {
1963     font-size: x-small;
1964 }
1965 .contact-entry-photo {
1966     position: relative;
1967 }
1968 .contact-entry-edit-links .icon {
1969     .borders(1px, solid, #babdb6);
1970     .rounded_corners(3px);
1971     background-color: white;
1972 }
1973 #contact-entry-url,
1974 [id^="contact-entry-url"],
1975 #contact-entry-network,
1976 [id^="contact-entry-network"] {
1977     font-size: smaller;
1978 }
1979 #contact-entry-network,
1980 [id^="contact-entry-network"] {
1981     font-style: italic;
1982 }
1983 #contact-edit-banner-name {
1984     font-size: 1.5em;
1985 }
1986
1987 #contact-edit-photo-wrapper {
1988     position: relative;
1989     float: left;
1990     padding: 20px;
1991 }
1992 #contact-edit-direction-icon {
1993     position: absolute;
1994     top: 60px;
1995     left: 0;
1996 }
1997 #contact-edit-nav-wrapper {
1998     margin-left: 0px;
1999 }
2000 #contact-edit-links {
2001     margin-top: 23px;
2002 }
2003 #contact-drop-links {
2004     margin-left: 5px;
2005 }
2006 #contact-edit-nav-wrapper .icon {
2007     .borders(1px, solid, #babdb6);
2008     .rounded_corners(3px);
2009 }
2010 #contact-edit-poll-wrapper {
2011     margin-left: 0px;
2012 }
2013 #contact-edit-last-update-text {
2014     margin-bottom: 15px;
2015 }
2016 #contact-edit-last-updated {
2017     font-weight: bold;
2018 }
2019 #contact-edit-poll-text {
2020     display: inline;
2021 }
2022 #contact-edit-end {
2023     clear: both;
2024     margin-bottom: 65px;
2025 }
2026 .contact-photo-menu-button {
2027     position: absolute;
2028     background: url("dark/photo-menu.jpg") top left no-repeat transparent;
2029     margin: 0px;
2030     padding: 0px;
2031     .box(16px, 16px);
2032     top: 64px;
2033     left: 0px;
2034     overflow: hidden;
2035     text-indent: 40px;
2036     display: none;
2037 }
2038 .contact-photo-menu {
2039     width: auto;
2040     .borders(2px, solid, @link_colour);
2041     background: @bg_colour;
2042     color: @main_colour;
2043     position: absolute;
2044     font-size: smaller;
2045     .rounded_corners;
2046     left: 0px;
2047     top: 90px;
2048     display: none;
2049     z-index: 10000;
2050     li a {
2051         display: block;
2052         padding: 4px;
2053         color: @link_colour;
2054         background: @main_colour;
2055         line-height: 1;
2056         &:hover {
2057             background: @link_colour;
2058             color: @main_colour;
2059             text-decoration: none;
2060         }
2061     }
2062 }
2063
2064
2065 /**
2066  * register, settings & profile forms
2067  */
2068 .openid {}
2069 #id_openid_url {
2070     background: url(dark/login-bg.gif) no-repeat;
2071     background-position: 0 50%;
2072     padding-left: 18px;
2073 }
2074 #settings-default-perms {
2075     margin-bottom: 20px;
2076 }
2077 #register-form div, #profile-edit-form div {
2078     clear: both;
2079 }
2080 .settings-block {
2081     label {
2082         clear: left;
2083     }
2084     input {
2085         margin: 10px 5px;
2086     }
2087 }
2088 #register-form label,
2089 #profile-edit-form label {
2090     width: 23em;
2091 }
2092 #register-form span,
2093 #profile-edit-form span {
2094     color: @menu_bg_colour;
2095     display: inline-block;
2096     margin-bottom: 20px;
2097 }
2098 #profile-edit-marital-label span {
2099     margin: -4px;
2100 }
2101 .settings-submit-wrapper,
2102 .profile-edit-submit-wrapper {
2103     margin: 0 0 30px;
2104 }
2105 .profile-edit-side-div {
2106     display: none;
2107 }
2108 #profiles-menu-trigger {
2109     margin: 0px 0px 0px 25px;
2110 }
2111 .profile-listing {
2112     float: left;
2113     margin: 20px 20px 0px 0px;
2114 }
2115 .icon-profile-edit {
2116     background: url("dark/icons.png") -150px 0px no-repeat;
2117     border: 0;
2118     cursor: pointer;
2119     display: block;
2120     .box(20px, 20px);
2121     margin: 0 0 -18px;
2122     text-decoration: none;
2123     top: 113px;
2124     right: 260px;
2125 }
2126 #profile-edit-links ul {
2127     .list_reset;
2128     margin: 20px 0;
2129 }
2130 .marital {
2131     margin-top: 5px;
2132 }
2133 #register-sitename {
2134     display: inline;
2135     font-weight: bold;
2136 }
2137 #advanced-expire-popup {
2138     background: @bg_colour;
2139     color: @main_colour;
2140 }
2141 #id_ssl_policy {
2142     width: 374px;
2143 }
2144 #theme-preview img {
2145     margin: 10px 10px 10px 288px;
2146 }
2147
2148
2149 /**
2150  * contacts selector
2151  */
2152 .group-delete-wrapper {
2153     margin: -31px 50px 0 0;
2154     float: right;
2155 }
2156 /*.group-delete-icon {
2157     margin: 0 0 0 10px;
2158 }*/
2159 #group-edit-submit-wrapper {
2160     margin: 0 0 10px 0;
2161     display: inline;
2162 }
2163 #group-members, #prof-members {
2164     height: 200px;
2165     overflow: auto;
2166     .borders(1px, solid, @menu_bg_colour);
2167     .rounded_corners(5px 5px 0 0);
2168 }
2169 #group-all-contacts, #prof-all-contacts {
2170     height: 200px;
2171     overflow: auto;
2172     .borders(1px, solid, @menu_bg_colour);
2173     .rounded_corners(0 0 5px 5px);
2174 }
2175 #group-members h3,
2176 #group-all-contacts h3,
2177 #prof-members h3,
2178 #prof-all-contacts h3 {
2179     color: @main_alt_colour;
2180     background-color: @menu_bg_colour;
2181     margin: 0;
2182     padding: 5px;
2183 }
2184 #group-separator, #prof-separator {
2185     display: none;
2186 }
2187
2188
2189 /**
2190  * profile
2191  */
2192 #cropimage-wrapper {
2193     float: left;
2194 }
2195 #crop-image-form {
2196     clear: both;
2197 }
2198
2199
2200 /**
2201  * intros
2202  */
2203 .intro-wrapper {
2204     margin-top: 20px;
2205 }
2206 .intro-fullname {
2207     font-size: 1.1em;
2208     font-weight: bold;
2209 }
2210 .intro-note {
2211     padding: 10px;
2212 }
2213 .intro-end {
2214     padding: 30px;
2215 }
2216 .intro-form {
2217     float: left;
2218 }
2219 .intro-approve-form {
2220     clear: both;
2221 }
2222 .intro-submit-approve,
2223 .intro-submit-ignore {
2224     margin-right: 20px;
2225 }
2226 .intro-submit-approve {
2227     margin-top: 15px;
2228 }
2229 .intro-approve-as-friend-label,
2230 .intro-approve-as-fan-label,
2231 .intro-approve-as-friend,
2232 .intro-approve-as-fan {
2233     float: left;
2234 }
2235 .intro-form-end {
2236     clear: both;
2237     margin-bottom: 10px;
2238 }
2239 .intro-approve-as-end {
2240     clear: both;
2241     margin-bottom: 10px;
2242 }
2243 .clear {
2244     clear: both;
2245 }
2246
2247
2248 /**
2249  * events
2250  */
2251 .eventcal {
2252     float: left;
2253     font-size: 20px;
2254 }
2255 .event {
2256     background: @bg_colour;
2257 }
2258 .vevent {
2259     border: 1px solid darken(@main_alt_colour, 13.5%);
2260     .event-description,
2261     .event-location,
2262     .event-start {
2263         margin-left: 10px;
2264         margin-right: 10px;
2265     }
2266 }
2267 #new-event-link {
2268     margin-bottom: 10px;
2269 }
2270 .edit-event-link,
2271 .plink-event-link {
2272   /*float: left;      */
2273   /*margin-top: 4px;  */
2274   /*margin-right: 4px;*/
2275   /*margin-bottom: 15px;*/
2276 }
2277 .event-description:before {
2278     content: url('../../../images/calendar.png');
2279     margin-right: 15px;
2280 }
2281 .event-start,
2282 .event-end {
2283     margin-left: 10px;
2284     width: 330px;
2285     font-size: smaller;
2286 }
2287 .event-start .dtstart,
2288 .event-end .dtend {
2289     float: right;
2290 }
2291 .event-list-date {
2292     margin-bottom: 10px;
2293 }
2294 .prevcal, .nextcal {
2295     float: left;
2296     margin: 64px 32px auto 32px;
2297 }
2298 .calendar {
2299     font-family: monospace;
2300 }
2301 .today {
2302     font-weight: bold;
2303     color: red;
2304 }
2305 #event-start-text,
2306 #event-finish-text {
2307     margin-top: 10px;
2308     margin-bottom: 5px;
2309 }
2310 #event-nofinish-checkbox,
2311 #event-nofinish-text,
2312 #event-adjust-checkbox,
2313 #event-adjust-text,
2314 #event-share-checkbox {
2315     float: left;
2316 }
2317 #event-datetime-break {
2318     margin-bottom: 10px;
2319 }
2320 #event-nofinish-break,
2321 #event-adjust-break,
2322 #event-share-break {
2323     clear: both;
2324 }
2325 #event-desc-text,
2326 #event-location-text {
2327     margin-top: 10px;
2328     margin-bottom: 5px;
2329 }
2330 #event-submit {
2331     margin-top: 10px;
2332 }
2333 .body-tag {
2334     margin: 10px 0;
2335     opacity: 0.5;
2336     &:hover {
2337         opacity: 1.0 !important;
2338     }
2339 }
2340 .filesavetags,
2341 .categorytags {
2342     margin: 20px 0;
2343     opacity: 0.5;
2344 }
2345 .filesavetags:hover,
2346 .categorytags:hover {
2347     margin: 20px 0;
2348     opacity: 1.0 !important;
2349 }
2350 .item-select {
2351     opacity: 0.1;
2352     margin: 5px 0 0 6px !important;
2353     &:hover {
2354         opacity: 1;
2355     }
2356 }
2357 .checkeditem {
2358     opacity: 1;
2359 }
2360 #item-delete-selected {
2361     margin: 3em 5px;
2362     position: relative;
2363     left: 4em;
2364         width: 15em;
2365     overflow: auto;
2366 }
2367 #item-delete-selected-icon {
2368     float: left;
2369     margin: 11px 5px;
2370 }
2371 .fc-state-highlight {
2372     background: @main_colour;
2373     color: @bg_colour;
2374 }
2375
2376
2377 /**
2378  * directory
2379  */
2380 .directory-item {
2381     float: left;
2382     margin: 0 5px 4px 0;
2383     padding: 3px;
2384     width: 180px;
2385     height: 250px;
2386     position: relative;
2387 }
2388
2389
2390 /**
2391  * sidebar
2392  */
2393 #group-sidebar {
2394     margin-bottom: 10px;
2395 }
2396 .categories-selected,
2397 .group-selected,
2398 .nets-selected,
2399 .fileas-selected {
2400     // padding: 4px;
2401     color: @bg_colour;
2402     // background: @main_colour;
2403     // .borders(1px, solid, @link_colour);
2404     .multibutton_active;
2405 }
2406 .categories-selected:hover,
2407 .group-selected:hover,
2408 .nets-selected:hover,
2409 .fileas-selected:hover {
2410 //     padding: 4px;
2411     // color: @bg_colour;
2412 //     background: @bg_colour;
2413 //     .borders(1px, solid, @link_colour);
2414 }
2415 .groupsideedit {
2416     margin-right: 10px;
2417 }
2418 #sidebar-group-ul {
2419     padding-left: 0;
2420 }
2421 #sidebar-group-list {
2422     margin: 0 0 5px 0;
2423     li {
2424         margin-top: 10px;
2425     }
2426     .icon {
2427         display: inline-block;
2428         .box(12px, 12px);
2429     }
2430 }
2431 .sidebar-group-element {
2432     .multibutton;
2433     .rounded_corners;
2434 }
2435 #sidebar-new-group {
2436     margin: auto;
2437     display: inline-block;
2438     color: @main_alt_colour;
2439     text-decoration: none;
2440     text-align: center;
2441 }
2442 #peoplefind-sidebar form {
2443     margin-bottom: 10px;
2444 }
2445 #sidebar-new-group {
2446     &:hover {
2447         /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
2448         /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
2449         /*background-color: #b20202;*/
2450     }
2451     &:active {
2452         position: relative;
2453         top: 1px;
2454     }
2455 }
2456 #side-peoplefind-url {
2457     .borders(1px, solid, darken(@main_alt_colour, 33.5%));
2458     margin-right: 3px;
2459     width: 75%;
2460 }
2461 .categories-ul,
2462 .nets-ul {
2463     .list_reset;
2464     li {
2465         margin: 10px 0 0;
2466     }
2467 }
2468 .categories-link,
2469 .nets-link,
2470 .nets-all {
2471     .multibutton;
2472     .rounded_corners;
2473     margin-left: 0px;
2474 }
2475 #netsearch-box {
2476     margin: 20px 0px 30px;
2477     width: 135px;
2478     #search-submit {
2479         margin: 5px 5px 0px 0px;
2480     }
2481 }
2482
2483
2484 /**
2485  * admin
2486  */
2487 #pending-update {
2488     float: right;
2489     color: white;
2490     font-weight: bold;
2491     background-color: red;
2492     padding: 0 0.3em;
2493 }
2494 .admin {
2495     &.linklist {
2496         border: 0;
2497         padding: 0;
2498     }
2499     &.link {
2500         .list_reset;
2501     }
2502 }
2503 #adminpage {
2504     color: @main_colour;
2505     background: @bg_colour;
2506     margin: 5px;
2507     padding: 10px;
2508     font-size: smaller;
2509     dl {
2510         clear: left;
2511         margin-bottom: 2px;
2512         padding-bottom: 2px;
2513         border-bottom: 1px solid @shadow_colour;
2514     }
2515     dt {
2516         width: 250px;
2517         float: left;
2518         font-weight: bold;
2519     }
2520     dd {
2521         margin-left: 250px;
2522     }
2523     h3 {
2524         border-bottom: 1px solid darken(@main_alt_colour, 13.5%);
2525     }
2526     .submit {
2527         clear: left;
2528     }
2529     #pluginslist {
2530         margin: 0;
2531         padding: 0;
2532     }
2533     .plugin {
2534         display: block;
2535         .borders(1px, solid, darken(@main_alt_colour, 40%));
2536         padding: 1em;
2537         margin-bottom: 5px;
2538         clear: left;
2539     }
2540     .toggleplugin {
2541         float: left;
2542         margin-right: 1em;
2543     }
2544     table {
2545         width: 100%;
2546         border-bottom: 1px solid @shadow_colour;
2547         margin: 5px 0;
2548         th {
2549             font-weight: bold;
2550             text-align: left;
2551         }
2552         td {
2553             padding: 5px;
2554             vertical-align: middle;
2555         }
2556         &#users {
2557             padding: 5px;
2558             img {
2559                 .box(16px, 16px);
2560             }
2561             a {
2562                 color: @main_colour;
2563                 text-decoration: underline;
2564             }
2565         }
2566     }
2567     td .icon {
2568         float: left;
2569     }
2570     .selectall {
2571         text-align: right;
2572     }
2573 }
2574 #users .name {
2575     color: @main_colour;
2576 }
2577 #users .tools {
2578     padding: 5px 0;
2579     vertical-align: middle;
2580 }
2581
2582
2583 /**
2584  * form fields
2585  */
2586 .field {
2587     overflow: auto;
2588 }
2589 .field .onoff {
2590     float: right;
2591     margin: 0 330px 0 auto;
2592     width: 80px;
2593     a {
2594         display: block;
2595         .borders(1px, solid, darken(@main_alt_colour, 53.5%));
2596         padding: 3px 6px 4px 10px;
2597         height: 16px;
2598         text-decoration: none;
2599     }
2600     .on, .off {
2601         background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAUACIDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAQDBQEGCf/EACgQAAIBAwIFAwUAAAAAAAAAAAECAAMEERIUBRMxUpEhIoEjM1Nxkv/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgT/xAAaEQEAAgMBAAAAAAAAAAAAAAAAAQIRMVES/9oADAMBAAIRAxEAPwD1ERKFNFVaNNVUYACgACcNVt1dEKUwzZwNI9cSDczDVdnuKDjomrPyJOQ2SXNq/L0rTPMzp9vXHWZfo/jT+RNFQV6e2yPt6s/Ms3EWQofhnDqjszWFqzMcljRUknxEn3ES/dup8xxPZ0hXtKFViQzorEDpkiZtqvc3mIkzs40bVe5vMbVe5vMREbrN3xy4t7utSVaZVHZQSDnAP7iIm+K1xpkm09f/2Q==');
2602         background-repeat: no-repeat;
2603     }
2604     .on {
2605         background-position: 42px 1px;
2606         background-color: darken(@main_alt_colour, 33.5%);
2607         color: darken(@main_alt_colour, 86.5%);
2608         text-align: left;
2609     }
2610     .off {
2611         background-position: 2px 1px;
2612         background-color: darken(@main_alt_colour, 13.5%);
2613         color: darken(@main_alt_colour, 73.5%);
2614         text-align: right;
2615     }
2616 }
2617 .hidden {
2618     display: none !important;
2619 }
2620 .field textarea {
2621     .box(80%, 100px);
2622 }
2623 .field_help {
2624     display: block;
2625     margin-left: 297px;
2626     color: darken(@main_alt_colour, 24%);
2627     font-size: small;
2628 }
2629 .field.radio .field_help {
2630     margin-left: 297px;
2631 }
2632
2633
2634 /*
2635  * update
2636  */
2637 .popup {
2638     .box(100%, 100%);
2639     top: 0px;
2640     left: 0px;
2641     position: absolute;
2642     display: none;
2643     .background {
2644         background-color: darken(@main_alt_colour, 86.5%);
2645         opacity: 0.5;
2646         .box(100%, 100%);
2647         position: absolute;
2648         top: 0px;
2649         left: 0px;
2650     }
2651     .panel {
2652         top: 25%;
2653         left: 25%;
2654         .box(50%, 50%);
2655         padding: 1em;
2656         position: absolute;
2657         .borders(4px, solid, black);
2658         background-color: white;
2659     }
2660 }
2661 #panel {
2662     position: absolute;
2663     font-size: small;
2664     .rounded_corners;
2665     .borders(1px, solid, @main_alt_colour);
2666     background-color: @bg_alt_colour;
2667     color: @main_colour;
2668     padding: 1em;
2669     z-index: 100;
2670 }
2671 .pager {
2672     margin-top: 60px;
2673     display: block;
2674     clear: both;
2675     text-align: center;
2676     font-size: small;
2677     font-weight: bold;
2678     span {
2679         padding: 4px;
2680         margin: 4px;
2681     }
2682 }
2683 .pager_current {
2684     background-color: @link_colour;
2685     color: @bg_colour;
2686 }
2687 .grey,
2688 .gray {
2689     color: gray;
2690 }
2691 .orange {
2692     color: orange;
2693 }
2694 .red {
2695     color: red;
2696 }
2697 .popup .panel {
2698     .panel_text {
2699         display: block;
2700         overflow: auto;
2701         height: 80%;
2702     }
2703     .panel_in {
2704         .box(100%, 100%);
2705         position: relative;
2706     }
2707     .panel_actions {
2708         width: 100%;
2709         bottom: 4px;
2710         left: 0px;
2711         position: absolute;
2712     }
2713 }
2714 .panel_text .progress {
2715     width: 50%;
2716     overflow: hidden;
2717     height: auto;
2718     .borders(1px, solid, darken(@main_alt_colour, 13.5%));
2719     margin-bottom: 5px;
2720     span {
2721         float: right;
2722         display: block;
2723         width: 25%;
2724         background-color: @main_alt_colour;
2725         text-align: right;
2726     }
2727 }
2728
2729
2730 /**
2731  * OAuth
2732  */
2733 .oauthapp {
2734     height: auto;
2735     overflow: auto;
2736     border-bottom: 2px solid darken(@main_alt_colour, 13.5%);
2737     padding-bottom: 1em;
2738     margin-bottom: 1em;
2739     img {
2740         float: left;
2741         .box(48px, 48px);
2742         margin: 10px;
2743         &.noicon {
2744             background-image: url("../../../images/icons/48/plugin.png");
2745             background-position: center center;
2746             background-repeat: no-repeat;
2747         }
2748     }
2749     a {
2750         float: left;
2751     }
2752 }
2753
2754
2755 /**
2756  * icons
2757  */
2758 .iconspacer {
2759     display: block;
2760     .box(16px, 16px);
2761 }
2762 .icon {
2763     display: block;
2764     .box;
2765     background: transparent url("dark/icons.png") no-repeat;
2766     border: 0;
2767     text-decoration: none;
2768     .rounded_corners;
2769     &:hover {
2770         border: 0;
2771         text-decoration: none;
2772     }
2773 }
2774 .editicon {
2775     display: inline-block;
2776     .box(21px, 21px);
2777     background: url("dark/editicons.png") no-repeat;
2778     border: 0;
2779     text-decoration: none;
2780 }
2781 .shadow {
2782     .box_shadow(2px, 2px, 5px, 2px);
2783     &:active, &:focus, &:hover {
2784         .box_shadow(0, 0, 0, 0);
2785     }
2786 }
2787 .editicon:hover {
2788     border: 0;
2789 }
2790 .boldbb {
2791     background-position: 0px 0px;
2792     &:hover {
2793         background-position: -22px 0px; }
2794 }
2795 .italicbb {
2796     background-position: 0px -22px;
2797     &:hover {
2798         background-position: -22px -22px; }
2799 }
2800 .underlinebb {
2801     background-position: 0px -44px;
2802     &:hover {
2803         background-position: -22px -44px; }
2804 }
2805 .quotebb {
2806     background-position: 0px -66px;
2807     &:hover {
2808         background-position: -22px -66px; }
2809 }
2810 .codebb {
2811     background-position: 0px -88px;
2812     &:hover {
2813         background-position: -22px -88px; }
2814 }
2815 .imagebb {
2816     background-position: -44px 0px;
2817     &:hover {
2818         background-position: -66px 0px; }
2819 }
2820 .urlbb {
2821     background-position: -44px -22px;
2822     &:hover {
2823         background-position: -66px -22px; }
2824 }
2825 .videobb {
2826     background-position: -44px -44px;
2827     &:hover {
2828         background-position: -66px -44px; }
2829 }
2830 .icon {
2831     &.drop, &.drophide, &.delete {
2832         float: left;
2833         margin: 0 2px;
2834     }
2835     &.s22 {
2836         &.delete {
2837             display: block;
2838             background-position: -110px 0;
2839         }
2840         &.text {
2841             padding: 10px 0px 0px 25px;
2842             width: 200px;
2843         }
2844     }
2845     &.text {
2846         text-indent: 0px;
2847     }
2848     &.s16 {
2849         min-width: 16px;
2850         height: 16px;
2851     }
2852 }
2853 // special case for wall items
2854 .wall-item-delete-wrapper.icon.delete,
2855 .wall-item-delete-wrapper.icon.drophide {
2856     margin: 0;
2857 }
2858 .s16 .add {
2859     background: url("../../../images/icons/16/add.png") no-repeat;
2860 }
2861 .add {
2862     margin: 0px 5px;
2863 }
2864 .article {
2865     background-position: -50px 0;
2866 }
2867 .audio {
2868     background-position: -70px 0;
2869 }
2870 .block {
2871     background-position: -90px 0px;
2872 }
2873 .drop, .delete {
2874     background-position: -110px 0;
2875 }
2876 .drophide {
2877     background-position: -130px 0;
2878 }
2879 .edit {
2880     background-position: -150px 0;
2881 }
2882 .camera {
2883     background-position: -170px 0;
2884 }
2885 .dislike {
2886     background-position: -190px 0;
2887 }
2888 .file-as {
2889     background-position: -230px -60px;
2890 }
2891 .like {
2892     background-position: -211px 0;
2893 }
2894 .link {
2895     background-position: -230px 0;
2896 }
2897 .globe,
2898 .location {
2899     background-position: -50px -20px;
2900 }
2901 .noglobe,
2902 .nolocation {
2903     background-position: -70px -20px;
2904 }
2905 .no {
2906     background-position: -90px -20px;
2907 }
2908 .pause {
2909     background-position: -110px -20px;
2910 }
2911 .play {
2912     background-position: -130px -20px;
2913 }
2914 .pencil {
2915     background-position: -151px -18px;
2916 }
2917 .small-pencil {
2918     background-position: -170px -20px;
2919 }
2920 .recycle {
2921     background-position: -190px -20px;
2922 }
2923 .remote-link {
2924     background-position: -210px -20px;
2925 }
2926 .share {
2927     background-position: -230px -20px;
2928 }
2929 .tools {
2930     background-position: -50px -40px;
2931 }
2932 .lock {
2933     background-position: -70px -40px;
2934 }
2935 .unlock {
2936     background-position: -88px -40px;
2937 }
2938 .video {
2939     background-position: -110px -40px;
2940 }
2941 .attach {
2942     background-position: -191px -40px;
2943 }
2944 .language {
2945     background-position: -210px -40px;
2946 }
2947 .starred {
2948     background-position: -130px -60px;
2949 }
2950 .unstarred {
2951     background-position: -150px -60px;
2952 }
2953 .tagged {
2954     background-position: -170px -60px;
2955 }
2956 .on {
2957     background-position: -50px -60px;
2958 }
2959 .off {
2960     background-position: -70px -60px;
2961 }
2962 .prev {
2963     background-position: -90px -60px;
2964 }
2965 .next {
2966     background-position: -110px -60px;
2967 }
2968 .icon.dim {
2969     opacity: 0.3;
2970 }
2971 #pause {
2972     position: fixed;
2973     bottom: 40px;
2974     right: 30px;
2975     z-index: 10;
2976 }
2977 .border {
2978     .borders(1px, solid, @border2);
2979     .rounded_corners;
2980     &:hover {
2981         .borders(1px, solid, @border2);
2982         .rounded_corners;
2983     }
2984 }
2985 .attachtype {
2986     display: block;
2987     .box(20px, 23px);
2988     background-image: url(../../../images/content-types.png);
2989         background-position: -80px 0px;
2990 }
2991 .type-video {
2992     background-position: 0px 0px;
2993 }
2994 .type-image {
2995     background-position: -20px 0;
2996 }
2997 .type-audio {
2998     background-position: -40px 0;
2999 }
3000 .type-text {
3001     background-position: -60px 0px;
3002 }
3003 .type-unkn {
3004     background-position: -80px 0;
3005 }
3006
3007
3008 /**
3009  * footer
3010  */
3011 .cc-license {
3012     margin-top: 100px;
3013     font-size: 0.7em;
3014 }
3015 footer {
3016     display: block;
3017     clear: both;
3018 }
3019 #sectionfooter {
3020     margin: 1em 0 1em 0;
3021 }
3022 #profile-jot-text {
3023     height: 20px;
3024     color: @main_colour;
3025     background: @bg_colour;
3026     .borders;
3027     .rounded_corners;
3028     width: 99.5%;
3029 }
3030
3031
3032 /**
3033  * acl
3034  */
3035 #photo-edit-perms-select,
3036 #photos-upload-permissions-wrapper,
3037 #profile-jot-acl-wrapper {
3038     display: block !important;
3039     background: @bg_colour;
3040     color: @main_colour;
3041 }
3042 #profile-jot-acl-wrapper {
3043     margin: 0 10px;
3044     .borders(1px, solid, @menu_bg_colour);
3045     border-top: 0;
3046     font-size: small;
3047     // .box_shadow;
3048 }
3049 #acl-wrapper {
3050     width: 660px;
3051     margin: 0 auto;
3052 }
3053 #acl-search {
3054     float: right;
3055     background: white url("../../../images/search_18.png") no-repeat right center;
3056     padding-right: 20px;
3057     margin: 6px;
3058     color: @shadow_colour;
3059 }
3060 #acl-showall {
3061     float: left;
3062     display: block;
3063     .box(auto, 18px);
3064     background: @main_colour url("../../../images/show_all_off.png") 8px 8px no-repeat;
3065     padding: 7px 10px 7px 30px;
3066     .rounded_corners;
3067     color: darken(@main_alt_colour, 33.5%);
3068     margin: 5px 0;
3069     &.selected {
3070         color: black;
3071         background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat;
3072     }
3073 }
3074 #acl-list {
3075     height: 210px;
3076     .borders(1px, solid, darken(@main_alt_colour, 13.5%);
3077     clear: both;
3078     margin-top: 30px;
3079     overflow: auto;
3080 }
3081 /*#acl-list-content {
3082 }*/
3083 .acl-list-item {
3084     .borders;
3085     .box(120px, 110px);
3086     display: block;
3087     float: left;
3088     margin: 3px 0 5px 5px;
3089     img {
3090         .box(22px, 22px);
3091         float: left;
3092         margin: 5px 5px 20px;
3093     }
3094     p {
3095         height: 12px;
3096         font-size: 10px;
3097         margin: 0 0 22px;
3098         padding: 2px 0 1px;
3099     }
3100     a {
3101         background: @main_colour 3px 3px no-repeat;
3102         .rounded_corners;
3103         .box(55px, 20px);
3104         clear: both;
3105         font-size: 10px;
3106         display: block;
3107         color: @bg_colour;
3108         margin: 5px auto 0;
3109         padding: 0 3px;
3110         text-align: center;
3111         vertical-align: middle;
3112     }
3113 }
3114 #acl-wrapper a:hover {
3115     text-decoration: none;
3116     color: @bg_colour;
3117     border: 0;
3118 }
3119 //data URI:
3120 // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
3121 .acl-button-show {
3122     // background-image: url('../../../images/show_off.png');
3123     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg==');
3124     margin: 0 auto;
3125 }
3126 .acl-button-hide {
3127     // background-image: url('../../../images/hide_off.png');
3128     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII=');
3129     margin: 0 auto;
3130 }
3131 .acl-button-show.selected {
3132     // background: #9ade00 url(../../../images/show_on.png);
3133     background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII=');
3134     color: @bg_colour;
3135 }
3136 .acl-button-hide.selected {
3137     // background: #ff4141 url(../../../images/hide_on.png);
3138     background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg==');
3139     color: @bg_colour;
3140 }
3141 .acl-list-item {
3142     &.groupshow {
3143         border-color: @group_show;
3144     }
3145     &.grouphide {
3146         border-color: @group_hide;
3147     }
3148 }
3149 /** /acl **/
3150
3151
3152 /* autocomplete popup */
3153 .acpopup {
3154     max-height: 175px;
3155     max-width: 42%;
3156     background-color: @menu_bg_colour;
3157     color: white;
3158     overflow: auto;
3159     z-index: 100000;
3160     border: 1px solid darken(@main_alt_colour, 13.5%);
3161 }
3162 .acpopupitem {
3163     background-color: @menu_bg_colour;
3164     padding: 4px;
3165     clear: left;
3166     img {
3167         float: left;
3168         margin-right: 4px;
3169     }
3170     &.selected {
3171         color: @bg_alt_colour;
3172         background-color: @main_alt_colour;
3173     }
3174 }
3175 .qcomment-wrapper {
3176     padding: 0px;
3177     margin: 5px 5px 5px 81%;
3178 }
3179 .qcomment {
3180     opacity: 0.5;
3181     &:hover {
3182         opacity: 1.0;
3183     }
3184 }
3185 #network-star-link {
3186     margin-top: 10px;
3187 }
3188 .network-star {
3189     float: left;
3190     margin-right: 5px;
3191     &.icon.starred {
3192         display: inline-block;
3193     }
3194 }
3195 #fileas-sidebar {}
3196
3197 .fileas-ul {
3198     padding: 0;
3199 }
3200
3201
3202 /*
3203  * addons theming
3204  */
3205 #sidebar-page-list {
3206     ul {
3207         padding: 0;
3208         margin: 5px 0;
3209     }
3210     li {
3211         list-style: none;
3212     }
3213 }
3214 #jappix_mini {
3215     margin-left: 130px;
3216     position: fixed;
3217     bottom: 0;
3218     /* override the jappix css */
3219     right: 175px !important;
3220     z-index: 999;
3221 }
3222
3223 #fancybox-content {
3224         color: #111;
3225 }
3226
3227 @import "../css/media";