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 #lang-select-icon {
 802     cursor: pointer;
 803     position: fixed;
 804     left: 28px;
 805     bottom: 6px;
 806     z-index: 10;
 807 }
 808 #language-selector {
 809     position: fixed;
 810     bottom: 2px;
 811     left: 52px;
 812     z-index: 10;
 813 }
 814 .menu-popup {
 815     position: absolute;
 816     display: none;
 817     // width: 11em;
 818     background: white;
 819     color: @bg_colour;
 820     margin: 0px;
 821     padding: 0px;
 822     font-size: small;
 823     line-height: 1.2;
 824     .borders(3px, solid, @link_colour);
 825     .rounded_corners;
 826     z-index: 100000;
 827     .box_shadow;
 828     a {
 829         display: block;
 830         color: @bg_colour;
 831         padding: 5px 10px;
 832         text-decoration: none;
 833         &:hover {
 834             color: @main_colour;
 835             background-color: @link_colour;
 836         }
 837     }
 838     .menu-sep {
 839         border-top: 1px solid @med_bg_colour;
 840     }
 841     li {
 842         float: none;
 843         overflow: auto;
 844         height: auto;
 845         display: block;
 846         img {
 847             float: left;
 848             .box(16px, 16px);
 849             padding-right: 5px;
 850         }
 851     }
 852     .empty {
 853         padding: 5px;
 854         text-align: center;
 855         color: lighten(@shiny_colour, 45%);
 856     }
 857 }
 858 .notif-item {
 859     font-size: small;
 860     a {
 861         vertical-align: middle;
 862     }
 863 }
 864 .notif-image {
 865     .box(32px, 32px);
 866     padding: 7px 7px 0px 0px;
 867 }
 868 .notify-seen {
 869     background: @disabled_colour;
 870     color: @main_colour;
 871 }
 872 .notify-unseen {
 873     color: @main_colour;
 874 }
 875
 876
 877 /**
 878  * sysmsg
 879  */
 880 #sysmsg_info {
 881     position: fixed;
 882     bottom: 0;
 883     .box_shadow(@main_shadow);
 884     padding: 10px;
 885     background-color: @lt_orange;
 886     .borders(2px, solid, @orange);
 887     border-bottom: 0;
 888     padding-bottom: 50px;
 889     z-index: 1000;
 890 }
 891 #sysmsg {
 892     position: fixed;
 893     bottom: 0;
 894     .box_shadow(@main_shadow);
 895     padding: 10px;
 896     background-color: @lt_orange;
 897     .borders(2px, solid, @orange);
 898     border-bottom: 0;
 899     padding-bottom: 50px;
 900     z-index: 1000;
 901 }
 902 #sysmsg_info br,
 903 #sysmsg br {
 904     display: block;
 905     margin: 2px 0px;
 906     border-top: 1px solid @main_colour;
 907 }
 908
 909
 910 /**
 911  * aside
 912  */
 913 #asidemain {
 914     float: left;
 915     font-size: small;
 916     margin: 1em;
 917     width: 25%;
 918     display: inline;
 919 }
 920 /* for now, disappear these */
 921 #asideright, #asideleft {
 922     display: none;
 923 }
 924 .vcard {
 925     .fn {
 926         font-size: 1.5em;
 927         font-weight: bold;
 928         border-bottom: 1px solid @hover_colour;
 929         padding-bottom: 3px;
 930     }
 931     #profile-photo-wrapper {
 932         margin: 20px 0;
 933         background-color: @menu_bg_colour;
 934         padding: 5px;
 935         .box(175px, 175px);
 936         .rounded_corners;
 937         .box_shadow(3px, 3px, 10px, 0);
 938     }
 939 }
 940 #asidemain {
 941     h4 {
 942         font-size: 1.2em; }
 943     #viewcontacts {
 944         text-align: right;
 945     }
 946     #contact-block {
 947         width: 99%;
 948         .contact-block-content {
 949             width: 99%;
 950             .contact-block-div {
 951                 float: left;
 952                 margin: 0 5px 5px 0;
 953                 .box(50px, 50px);
 954                 padding: 3px;
 955                 position: relative; } } }
 956 }
 957 .aprofile dt {
 958     background: @main_colour;
 959     color: @bg_colour;
 960     font-weight: bold;
 961     .box_shadow(3px, 3px, 5px);
 962     .rounded_corners;
 963     margin: 15px 0 5px;
 964     padding-left: 5px;
 965 }
 966 #profile-extra-links ul {
 967     margin-left: 0px;
 968     padding-left: 0px;
 969     list-style: none;
 970 }
 971 #dfrn-request-link {
 972     .rounded_corners;
 973     color: @main_colour;
 974     display: block;
 975     font-size: 1.2em;
 976     padding: 0.2em 0.5em;
 977     background-color: @friendica_blue;
 978     // background-image: url(icons/connect.png);
 979     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE4SURBVCiRpZKxLgRRFIa//64dKruZFRIlolBviFKiVHsHrRaFikTCC+hEQtRegMQDqDUKJOPOvauSMJmjYEU2M0viT071/+fLOTlHZkadQgjLkh1LPEoj661WKw5mXG034JxtAgtmrJoVK5WZYYCy1AVQSOYbjeSqMmRmQ8v755Ne77lb5w+d4HMNJopCT7X+bwDQZKfTyf4BIAHeawHe+/kQ/FGM+QagvpFl2VSM/tyMmV7PV14AYMQ5nUp0AULIp0HXzpVvSdLYMmNVAjNdAuNAUQHgxy/ZvEQTSMw0A33DxkIIi2ma3gwC9PKSzRWF2wbdpml62DfyPF9yjlNgAnQGLJjZnXON3Xa7ff8NGPbKQPNrbAOI0a9J2ilLEzAL7P0GqJJizF+BUeDhL2cclJnZPvAg6eADf+imKjSMX1wAAAAASUVORK5CYII=");
 980     background-repeat: no-repeat;
 981     background-position: 95% center;
 982 }
 983 #wallmessage-link {
 984     ///*background: #3465A4 url(dark/connect.png) no-repeat 95% center;*/
 985     ///*border-radius: 5px 5px 5px 5px;*/
 986     color: @main_alt_colour;
 987     display: block;
 988     font-size: 1.2em;
 989     padding: 0.2em 0.5em;
 990 }
 991 .ttright {
 992     margin: 0px;
 993 }
 994
 995
 996 /**
 997  * contacts block
 998  */
 999 .contact-block-div {
1000     .box(50px, 50px);
1001     float: left;
1002 }
1003 .contact-block-textdiv {
1004     .box(150px, 34px);
1005     float: left;
1006 }
1007
1008
1009 /**
1010  * jot
1011  */
1012 #jot {
1013     margin: 10px 0 20px 0px;
1014     width: 100%;
1015     #jot-tools {
1016         margin: 0px;
1017         padding: 0px;
1018         .box(100%, 35px);
1019         overflow: none;
1020         span {
1021             float: left;
1022             margin: 10px 20px 2px 0px;
1023             a {
1024                 display: block;
1025             }
1026         }
1027         .perms {
1028             float: right;
1029             width: 40px;
1030         }
1031         li.loading {
1032             float: right;
1033             background-color: white;
1034             .box(20px, 38px);
1035             vertical-align: center;
1036             text-align: center;
1037             border-top: 2px solid #9eabb0;
1038             img {
1039                 margin-top: 10px;
1040             }
1041         }
1042     }
1043     #jot-title {
1044         .borders(1px, solid, darken(@main_alt_colour, 13%));
1045         margin: 0 0 5px;
1046         .box(90%, 20px);
1047         font-weight: bold;
1048         .rounded_corners;
1049         vertical-align: middle;
1050     }
1051 }
1052 #jot-category {
1053     margin: 5px 0;
1054     .rounded_corners;
1055     .borders(1px, solid, darken(@main_alt_colour, 33%));
1056     color: darken(@main_alt_colour, 27%);
1057     font-size: smaller;
1058     &:focus {
1059         color: @main_alt_colour;
1060     }
1061 }
1062 #jot #character-counter {
1063     .box(6%, 15px);
1064     float: right;
1065     text-align: right;
1066     line-height: 20px;
1067     padding: 2px 20px 5px 0;
1068 }
1069 #profile-jot-text_parent {
1070     .box_shadow(5px, 0, 10px, 0);
1071 }
1072 #profile-jot-text_tbl {
1073     margin-bottom: 10px;
1074     background: darken(@main_alt_colour, 46.8%);
1075 }
1076 #profile-jot-text_ifr {
1077     width: 99.900002% !important;
1078 }
1079 #profile-jot-text_toolbargroup, .mceCenter tr {
1080     background: darken(@main_alt_colour, 46.8%);
1081 }
1082 [id$="jot-text_ifr"] {
1083     // width: 99.900002% !important;
1084     color: @bg_colour;
1085     background: @main_colour;
1086     .mceContentBody {
1087         color: @bg_colour;
1088         background: @main_colour;
1089     }
1090 }
1091 .defaultSkin {
1092     tr.mceFirst {
1093         background: darken(@main_alt_colour, 46.8%);
1094     }
1095     td {
1096         &.mceFirst, &.mceLast {
1097             background-color: @main_colour;
1098         }
1099     }
1100     span.mceIcon, img.mceIcon, .mceButtonDisabled .mceIcon {
1101         background-color: @main_colour;
1102     }
1103 }
1104 #profile-attach-wrapper,
1105 #profile-audio-wrapper,
1106 #profile-link-wrapper,
1107 #profile-location-wrapper,
1108 #profile-nolocation-wrapper,
1109 #profile-title-wrapper,
1110 #profile-upload-wrapper,
1111 #profile-video-wrapper {
1112     float: left;
1113     margin: 0 20px 0 0;
1114 }
1115 #profile-rotator-wrapper {
1116     float: right;
1117 }
1118 #profile-jot-email-wrapper {
1119     margin: 10px 10% 0;
1120     .borders(1px, solid, @menu_bg_colour);
1121     border-bottom: 0;
1122 }
1123 #profile-jot-email-label {
1124     background-color: @menu_bg_colour;
1125     color: @main_colour;
1126     padding: 5px;
1127 }
1128 #profile-jot-email {
1129     width: 90%;
1130     margin: 5px;
1131 }
1132 #profile-jot-networks {
1133     margin: 0 10%;
1134     border: 1px solid @menu_bg_colour;
1135     border-top: 0;
1136     border-bottom: 0;
1137     padding: 5px;
1138 }
1139 #profile-jot-net {
1140     margin: 5px 0;
1141 }
1142 #jot-preview-link {
1143     margin: 0 0 0 10px;
1144     border: 0;
1145     text-decoration: none;
1146     float: right;
1147 }
1148 .icon-text-preview {
1149     margin: 0 0 -18px 0;
1150     display: block;
1151     .box(20px, 20px);
1152     background: url(dark/icons.png) no-repeat -128px -40px;
1153     border: 0;
1154     text-decoration: none;
1155     float: right;
1156     cursor: pointer;
1157 }
1158 #profile-jot-perms {
1159     float: right;
1160     color: @menu_bg_colour;
1161     .box(20px, 20px);
1162     .rounded_corners;
1163     .box_shadow(3px, 3px, 5px, 0);
1164     .borders(2px, outset, @menu_bg_colour);
1165     overflow: hidden;
1166     margin: 0 10px 0 10px;
1167 }
1168 #profile-jot-plugin-wrapper {
1169     width: 1px;
1170     margin: 10px 0 0 0;
1171     float: right;
1172 }
1173 #profile-jot-submit-wrapper {
1174     float: right;
1175     width: 100%;
1176     margin: 10px 0 0 0;
1177     padding: 0;
1178 }
1179 #profile-jot-submit {
1180     height: auto;
1181     background-color: @menu_bg_colour;
1182     color: @main_alt_colour;
1183     .rounded_corners;
1184     .borders(2px, outset, @shiny_colour);
1185     margin: 0;
1186     float: right;
1187     .text_shadow;
1188     width: auto;
1189     &:active {
1190         .box_shadow(0, 0, 0, 0);
1191     }
1192 }
1193 #jot-perms-icon {
1194     .box(22px, 22px);
1195     .rounded_corners;
1196     overflow: hidden;
1197     background: @menu_bg_colour url("dark/icons.png") -88px -40px;
1198 }
1199 #group_allow_wrapper,
1200 #group_deny_wrapper,
1201 #acl-permit-outer-wrapper,
1202 #contact_allow_wrapper,
1203 #contact_deny_wrapper,
1204 #acl-deny-outer-wrapper {
1205     width: 47%;
1206 }
1207 #group_allow_wrapper,
1208 #group_deny_wrapper,
1209 #acl-permit-outer-wrapper {
1210     float: left;
1211 }
1212 #contact_allow_wrapper,
1213 #contact_deny_wrapper,
1214 #acl-deny-outer-wrapper {
1215     float: right;
1216 }
1217 #acl-permit-text {
1218     background-color: darken(@main_alt_colour, 60%);
1219     color: @main_colour;
1220     padding: 5px;
1221     float: left;
1222 }
1223 #jot-public {
1224     background-color: darken(@main_alt_colour, 60%);
1225     color: @alert;
1226     padding: 5px;
1227     float: left;
1228 }
1229 #acl-deny-text {
1230     background-color: darken(@main_alt_colour, 60%);
1231     color: @main_colour;
1232     padding: 5px;
1233     float: left;
1234 }
1235 #jot-title-desc {
1236     color: darken(@main_alt_colour, 13%);
1237 }
1238 #profile-jot-desc {
1239     background: @bg_colour;
1240     .borders;
1241     .rounded_corners;
1242     color: @red_orange;
1243     margin: 5px 0;
1244 }
1245 #jot-title-wrapper {
1246     margin-bottom: 5px;
1247 }
1248 #jot-title-display {
1249     font-weight: bold;
1250 }
1251 .jothidden {
1252     display: none;
1253 }
1254 #jot-preview-content {
1255     background-color: @shiny_colour;
1256     color: @main_colour;
1257     .borders(1px, solid, @bg_colour);
1258     .rounded_corners;
1259     .box_shadow(5px, 0, 10px);
1260     padding: 3px 3px 6px 10px;
1261     margin: 5em auto 1em;
1262     .wall-item-outside-wrapper {
1263         border: 0;
1264         .rounded_corners(0px 0px 0px 0px);
1265         .box_shadow(0, 0, 0, 0);
1266     }
1267 }
1268
1269
1270 /**
1271  * section
1272  */
1273 #sectionmain {
1274     margin: 1em;
1275     font-size: 0.8em;
1276     min-width: 475px;
1277     width: 69%;
1278     float: left;
1279     display: inline;
1280 }
1281
1282
1283 /**
1284  * tabs
1285  */
1286 .tabs {
1287     .list_reset;
1288     margin: 10px 0;
1289     li {
1290         display: inline;
1291         font-size: smaller;
1292     }
1293 }
1294 .multibutton () {
1295     .borders(1px, solid, @hover_colour);
1296     padding: 4px;
1297     .rounded_corners;
1298     &:active,
1299     &:hover {
1300         background: @shiny_colour;
1301         color: @main_colour;
1302         .borders(1px, solid, @hover_colour);
1303     }
1304     a {
1305         border: 0;
1306         text-decoration: none;
1307     }
1308 }
1309 .multibutton_active () {
1310     background: @main_colour;
1311     color: @bg_colour;
1312     .borders(1px, solid, @hover_colour);
1313     padding: 4px;
1314     .rounded_corners;
1315     &:hover {
1316         background: @shiny_colour;
1317         color: @main_colour;
1318         .borders(1px, solid, @hover_colour);
1319     }
1320     a {
1321         color: @bg_colour;
1322         text-decoration: none;
1323     }
1324 }
1325 .tab {
1326     .multibutton;
1327 }
1328 .tab {
1329     &.active {
1330         .multibutton_active;
1331     }
1332 }
1333
1334
1335 /**
1336  * items
1337  */
1338 .wall-item-outside-wrapper {
1339     .borders(1px, solid, darken(@main_alt_colour, 27%));
1340     .rounded_corners;
1341     .box_shadow(6px, 1px, 10px, -2px);//@lt_shadow_colour
1342     &.comment {
1343         margin-top: 5px;
1344     }
1345 }
1346 .wall-item-content-wrapper {
1347     position: relative;
1348     padding: 0.75em;
1349     width: auto;
1350 }
1351 .wall-item-outside-wrapper .wall-item-comment-wrapper {
1352     /*margin-left: 90px;*/
1353     .preview {
1354         border: 0;
1355         .rounded_corners(0px);
1356     }
1357 }
1358 .shiny {
1359     background: @shiny_colour;
1360     .rounded_corners;
1361 }
1362 .wall-outside-wrapper .shiny {
1363     .rounded_corners;
1364 }
1365 .heart {
1366     color: red;
1367 }
1368 .wall-item-content {
1369     overflow-x: auto;
1370     margin: 0px 4em 1em 5px;
1371 }
1372 [id^="tread-wrapper"],
1373 [class^="tread-wrapper"] {
1374     margin: 1.2em 0 0 0;
1375     padding: 0px;
1376 }
1377 .wall-item-photo-menu {
1378     display: none;
1379 }
1380 .wall-item-photo-menu-button {
1381     display: none;
1382     text-indent: -99999px;
1383     background: @menu_bg_colour url(dark/menu-user-pin.jpg) no-repeat 75px center;
1384     position: absolute;
1385     overflow: hidden;
1386     .box(90px, 20px);
1387     top: 85px;
1388     left: 0;
1389     .rounded_corners(0 0 5px 5px);
1390 }
1391 .wall-item-info {
1392     float: left;
1393     width: 7em;
1394     position: relative;
1395 }
1396 .wall-item-photo-wrapper {
1397     .box(80px, 80px);
1398     position: relative;
1399     padding: 5px;
1400     background-color: @menu_bg_colour;
1401     .rounded_corners;
1402 }
1403 [class^="wall-item-tools"] * {
1404     /*margin: 0 0 5px 0;*/
1405     > * {
1406         /*margin: 0 0 5px 0;*/
1407     }
1408 }
1409 .wall-item-tools {
1410     float: right;
1411     opacity: 0.4;
1412     .transition;
1413     &:hover {
1414         opacity: 1;
1415         .transition;
1416     }
1417 }
1418 .wall-item-subtools1 {
1419     .box(30px, 30px);
1420     list-style: none outside none;
1421     margin: 18px 0 30px -20px;
1422     padding: 0;
1423 }
1424 .wall-item-subtools2 {
1425     .box(25px, 25px);
1426     list-style: none outside none;
1427     margin: -78px 0 0 5px;
1428     padding: 0;
1429 }
1430 .wall-item-title {
1431     font-size: 1.2em;
1432     font-weight: bold;
1433     margin-bottom: 1.4em;
1434 }
1435 .wall-item-body {
1436     margin: 1em;
1437     text-align: left;
1438     overflow-x: auto;
1439 }
1440 .wall-item-lock-wrapper {
1441     float: right;
1442     .box(22px, 22px);
1443     margin: 0 -5px 0 0;
1444     opacity: 1;
1445 }
1446 .wall-item-dislike,
1447 .wall-item-like {
1448     clear: left;
1449     font-size: 0.8em;
1450     color: lighten(@menu_bg_colour, 20%);
1451     margin: 5px 0 5px 10.2em;
1452     .transition;
1453     opacity: 0.5;
1454     &:hover {
1455         opacity: 1;
1456     }
1457 }
1458 .wall-item-author,
1459 .wall-item-actions-author,
1460 .wall-item-ago {
1461     color: @main_colour;
1462     line-height: 1;
1463     display: inline-block;
1464     font-size: x-small;
1465     margin: 0.5em auto;
1466     font-weight: bold;
1467 }
1468 .comment-edit-preview {
1469     width: auto;
1470     margin: auto auto auto -2em;
1471     &.wall-item-author,
1472     &.wall-item-actions-author,
1473     &.wall-item-ago {
1474         font-size: smaller;
1475     }
1476 }
1477 .wall-item-location {
1478     margin-top: 2em;
1479     width: 6em;
1480     overflow: hidden;
1481     .text_overflow;
1482     .icon {
1483         float: left;
1484     }
1485     > a,
1486     .smalltext {
1487         margin-left: 25px;
1488         font-size: 0.7em;
1489         display: block;
1490     }
1491     > br {
1492         display: none;
1493     }
1494 }
1495 .wallwall {
1496     .wwto {
1497         left: 5px;
1498         margin: 0;
1499         position: absolute;
1500         top: 75px;
1501         z-index: 10001;
1502         .box(30px, 30px);
1503         img {
1504             width: 30px !important;
1505             height: 30px !important;
1506         }
1507     }
1508     .wall-item-photo-end {
1509         clear: both;
1510     }
1511 }
1512 .wall-item-arrowphoto-wrapper {
1513     position: absolute;
1514     left: 35px;
1515     top: 80px;
1516     z-index: 10002;
1517 }
1518 .wall-item-photo-menu {
1519     min-width: 92px;
1520     font-size: 0.75em;
1521     .borders(2px, solid, @menu_bg_colour);
1522     border-top: 0px;
1523     background: @menu_bg_colour;
1524     position: absolute;
1525     left: -2px;
1526     top: 101px;
1527     display: none;
1528     z-index: 10003;
1529     .rounded_corners(0 5px 5px 5px);
1530     li a {
1531         white-space: nowrap;
1532         display: block;
1533         padding: 5px 6px;
1534         color: @main_alt_colour;
1535         &:hover {
1536             color: @menu_bg_colour;
1537             background: @main_alt_colour;
1538         }
1539     }
1540 }
1541 #connect-services-header,
1542 #extra-help-header {
1543     margin: 1.5em 0 0 0;
1544 }
1545 #connect-services,
1546 #extra-help {
1547     .list_reset;
1548     margin: 1em 0 0 0;
1549     li {
1550         display: inline;
1551     }
1552 }
1553
1554
1555 /**
1556  * comment
1557  */
1558 .ccollapse-wrapper {
1559     font-size: 0.9em;
1560     margin-left: 5em;
1561 }
1562 .hide-comments-outer {
1563     font-size: small;
1564 }
1565 .wall-item-outside-wrapper.comment {
1566     margin-left: 5em;
1567     .wall-item-info {
1568         width: 5em;
1569     }
1570     .wall-item-photo {
1571         width: 40px !important;
1572         height: 40px !important;
1573     }
1574     .wall-item-photo-wrapper {
1575         .box(40px, 40px);
1576     }
1577     .wall-item-photo-menu-button {
1578         width: 3.35em;
1579         top: 3.2em;
1580         background-position: 35px center;
1581     }
1582     .wall-item-author {
1583         margin-left: 0.2em;
1584     }
1585     .wall-item-photo-menu {
1586         min-width: 4.5em;
1587         top: 5.5em;
1588     }
1589 }
1590 .comment-wwedit-wrapper {
1591     .borders(1px, solid, @main_colour);
1592     .rounded_corners;
1593     margin: 5px;
1594 }
1595 .comment-edit-wrapper {
1596     border-top: 1px #aaa solid;
1597 }
1598 [class^="comment-edit-bb"] {
1599     .list_reset;
1600     display: none;
1601     margin: -40px 0 5px 60px;
1602     width: 75%;
1603     > li {
1604         display: inline-block;
1605         margin: 0 10px 0 0;
1606         visibility: none;
1607     }
1608 }
1609 .comment-wwedit-wrapper img,
1610 .comment-edit-wrapper img {
1611     .box;
1612 }
1613 .comment-edit-photo-link,
1614 .comment-edit-photo {
1615     margin-left: 10px;
1616 }
1617 .my-comment-photo {
1618     .box(40px, 40px);
1619     padding: 5px;
1620 }
1621 [class^="comment-edit-text"] {
1622     margin: 5px 0 10px 20px;
1623     width: 94%;
1624 }
1625 .comment-edit-text-empty {
1626     height: 20px;
1627     .med_borders;
1628     .rounded_corners;
1629     color: @med_border_colour;
1630     .transition;
1631     &:hover {
1632         color: darken(@main_alt_colour, 33.5%);
1633     }
1634 }
1635 .comment-edit-text-full {
1636     height: 10em;
1637     .rounded_corners;
1638     .transition;
1639 }
1640 .comment-edit-submit-wrapper {
1641     width: 90%;
1642     margin: 5px 5px 10px 50px;
1643     text-align: right;
1644 }
1645 .comment-edit-submit {
1646     height: 22px;
1647     background-color: @menu_bg_colour;
1648     color: @main_alt_colour;
1649     .rounded_corners;
1650     border: 0;
1651 }
1652
1653
1654 /**
1655  * item text style
1656  */
1657 .wall-item-body code {
1658     background-color: darken(@main_alt_colour, 66.5%);
1659     border-bottom: 1px dashed darken(@main_alt_colour, 13.5%);
1660     border-left: 5px solid darken(@main_alt_colour, 13.5%);
1661     border-top: 1px dashed darken(@main_alt_colour, 13.5%);
1662     color: @main_colour;
1663     display: block;
1664     overflow-x: auto;
1665     padding: 5px 0 15px 10px;
1666     width: 95%;
1667     a {
1668         color: @lt_link_colour;
1669     }
1670 }
1671
1672
1673 /**
1674  * profile
1675  */
1676 div {
1677     &[id$="text"] {
1678         font-weight: bold;
1679         border-bottom: 1px solid darken(@main_alt_colour, 13.5%);
1680     }
1681     &[id$="wrapper"] {
1682         height: 100%;
1683         br {
1684             clear: left;
1685         }
1686     }
1687 }
1688 .profile-match-wrapper {
1689     float: left;
1690     margin: 0 5px 40px 0;
1691     .box(120px, 120px);
1692     padding: 3px;
1693     position: relative;
1694 }
1695 .icon.drophide.profile-match-ignore {
1696     margin: 0 6px 0 -3px;
1697 }
1698 .profile-match-photo {
1699
1700 }
1701 [id$="-end"], [class$="-end"] {
1702     clear: both;
1703     margin: 0 0 10px 0;
1704 }
1705 .profile-match-end {
1706     margin: 0 0 5px 0;
1707 }
1708 .profile-match-name {
1709     font-weight: bold;
1710     margin: auto auto auto 23px;
1711 }
1712 .profile-match-connect {
1713     font-style: italic;
1714     margin: auto auto auto 23px;
1715 }
1716 #advanced-profile-with {
1717     margin-left: 200px;
1718 }
1719
1720
1721 /**
1722  * photos
1723  */
1724 .photos {
1725     height: auto;
1726     overflow: auto;
1727 }
1728 #photo-top-links {
1729     margin-bottom: 30px;
1730 }
1731 .photo-album-image-wrapper,
1732 .photo-top-image-wrapper {
1733     float: left;
1734     .box_shadow(3px, 3px, 10px, 0);
1735     background-color: darken(@main_alt_colour, 80%);
1736     color: @bg_colour;
1737     .rounded_corners;
1738     padding-bottom: 30px;
1739     position: relative;
1740     margin: 0 10px 10px 0;
1741 }
1742 #photo-photo {
1743     margin: auto auto 5em 20%;
1744     img {
1745         max-width: 50%;
1746     }
1747 }
1748 .photo-top-image-wrapper a:hover,
1749 #photo-photo a:hover,
1750 .photo-album-image-wrapper a:hover {
1751     border-bottom: 0;
1752 }
1753 .photo-top-photo,
1754 .photo-album-photo {
1755     .rounded_corners(5px 5px 0 0);
1756 }
1757 .photo-top-album-name,
1758 .caption {
1759     position: absolute;
1760     bottom: 0;
1761     padding: 0 5px;
1762 }
1763 #photo-prev-link,
1764 #photo-next-link {
1765     position: absolute;
1766     // .box(30%, 100%);
1767     .box(50px, 200px);
1768     background: white center center no-repeat;
1769     opacity: 0;
1770     .transition(all, 0.5s);
1771     z-index: 10;
1772     top: 15em;
1773     .rounded_corners;
1774     &:hover {
1775         opacity: 0.6;
1776         .transition(all, 0.5s);
1777     }
1778     .icon {
1779         display: none;
1780     }
1781 }
1782 #photo-prev-link {
1783     // background-image: url(dark/prev.png);
1784     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=");
1785     left: 5%;
1786 }
1787 #photo-next-link {
1788     // background-image: url(dark/next.png);
1789     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=");
1790     left: 50%;
1791 }
1792 #photo-prev-link a,
1793 #photo-next-link a {
1794     display: block;
1795     .box(100%, 100%);
1796     .rounded_corners;
1797     overflow: hidden;
1798     text-indent: -900000px;
1799 }
1800 #photos-upload-spacer,
1801 #photos-upload-new-wrapper,
1802 #photos-upload-exist-wrapper {
1803     margin-bottom: 1em;
1804 }
1805 #photos-upload-existing-album-text,
1806 #photos-upload-newalbum-div {
1807     background-color: @menu_bg_colour;
1808     color: @main_alt_colour;
1809     padding: 1px;
1810 }
1811 #photos-upload-album-select,
1812 #photos-upload-newalbum {
1813     width: 99%;
1814 }
1815 #photos-upload-perms-menu {
1816     text-align: right;
1817 }
1818 #photo-edit-caption,
1819 #photo-edit-newtag,
1820 #photo-edit-albumname {
1821
1822 }
1823 #photo-edit-link-wrap {
1824     margin-bottom: 15px;
1825 }
1826 #photo-edit-caption,
1827 #photo-edit-newtag {
1828
1829 }
1830 #photo-edit-perms {
1831     width: auto;
1832 }
1833 #photo-edit-rotate-label {
1834     .label;
1835 }
1836 #photo-like-div {
1837     float: left;
1838     margin: auto 0 0;
1839     width: 2em;
1840     .rounded_corners;
1841     .borders;
1842 }
1843 .wall-item-like-buttons {
1844     > * {
1845         display: inline;
1846     }
1847 }
1848 #photo-edit-delete-button {
1849     margin: auto auto auto 1em;
1850 }
1851 #photo-edit-end {
1852     margin-bottom: 35px;
1853 }
1854 #photo-caption {
1855     font-size: 110%;
1856     font-weight: bold;
1857     margin-top: 15px;
1858     margin-bottom: 15px;
1859 }
1860 #wall-photo-container {
1861     margin: 0 auto 1em 4em;
1862     width: 90%;
1863 }
1864
1865
1866 /**
1867  * message
1868  */
1869 .prvmail-text {
1870     width: 100%;
1871 }
1872 #prvmail-subject {
1873     width: 100%;
1874     color: @bg_colour;
1875     background: @main_colour;
1876 }
1877 #prvmail-submit-wrapper {
1878     margin-top: 10px;
1879 }
1880 #prvmail-submit {
1881     float: right;
1882     margin-top: 0;
1883 }
1884 #prvmail-submit-wrapper div {
1885     margin-right: 5px;
1886     float: left;
1887 }
1888 .mail-list-outside-wrapper {
1889     margin-top: 20px;
1890 }
1891 .mail-list-sender {
1892     float: left;
1893 }
1894 .mail-list-detail {
1895     margin-left: 90px;
1896 }
1897 .mail-list-sender-name {
1898     display: inline;
1899     font-size: 1.1em;
1900 }
1901 .mail-list-date {
1902     display: inline;
1903     font-size: 0.9em;
1904     padding-left: 10px;
1905 }
1906 .mail-list-sender-name,
1907 .mail-list-date {
1908     font-style: italic;
1909 }
1910 .mail-list-subject {
1911     font-size: 1.2em;
1912 }
1913 .mail-list-delete-wrapper {
1914     float: right;
1915 }
1916 .mail-list-outside-wrapper-end {
1917     clear: both;
1918     border-bottom: 1px @main_colour dotted;
1919 }
1920 .mail-conv-sender {
1921     float: left;
1922     margin: 0px 5px 5px 0px;
1923 }
1924 .mail-conv-sender-photo {
1925     .box(32px, 32px)
1926 }
1927 .mail-conv-sender-name {
1928     float: left;
1929 }
1930 .mail-conv-date {
1931     float: right;
1932 }
1933 .mail-conv-subject {
1934     clear: right;
1935     font-weight: bold;
1936     font-size: 1.2em;
1937 }
1938 .mail-conv-body {
1939     clear: both;
1940 }
1941 .mail-conv-delete-wrapper {
1942     margin-top: 5px;
1943 }
1944
1945
1946 /**
1947  * contacts
1948  */
1949 .view-contact-wrapper,
1950 .contact-entry-wrapper {
1951     float: left;
1952     margin: 0 5px 40px 0;
1953     .box(120px, 135px);
1954     padding: 3px;
1955     position: relative;
1956 }
1957 .contact-direction-wrapper {
1958     position: absolute;
1959     top: 20px;
1960 }
1961 .contact-edit-links {
1962     position: absolute;
1963     top: 60px;
1964 }
1965 .contact-entry-photo-wrapper {}
1966 .contact-entry-photo {
1967     margin-left: 20px;
1968 }
1969 .contact-entry-name {
1970     width: 120px;
1971     font-weight: bold;
1972     font-size: small;
1973 }
1974 .contact-entry-details {
1975     font-size: x-small;
1976 }
1977 .contact-entry-photo {
1978     position: relative;
1979 }
1980 .contact-entry-edit-links .icon {
1981     .borders(1px, solid, #babdb6);
1982     .rounded_corners(3px);
1983     background-color: white;
1984 }
1985 #contact-entry-url,
1986 [id^="contact-entry-url"],
1987 #contact-entry-network,
1988 [id^="contact-entry-network"] {
1989     font-size: smaller;
1990 }
1991 #contact-entry-network,
1992 [id^="contact-entry-network"] {
1993     font-style: italic;
1994 }
1995 #contact-edit-banner-name {
1996     font-size: 1.5em;
1997 }
1998
1999 #contact-edit-photo-wrapper {
2000     position: relative;
2001     float: left;
2002     padding: 20px;
2003 }
2004 #contact-edit-direction-icon {
2005     position: absolute;
2006     top: 60px;
2007     left: 0;
2008 }
2009 #contact-edit-nav-wrapper {
2010     margin-left: 0px;
2011 }
2012 #contact-edit-links {
2013     margin-top: 23px;
2014 }
2015 #contact-drop-links {
2016     margin-left: 5px;
2017 }
2018 #contact-edit-nav-wrapper .icon {
2019     .borders(1px, solid, #babdb6);
2020     .rounded_corners(3px);
2021 }
2022 #contact-edit-poll-wrapper {
2023     margin-left: 0px;
2024 }
2025 #contact-edit-last-update-text {
2026     margin-bottom: 15px;
2027 }
2028 #contact-edit-last-updated {
2029     font-weight: bold;
2030 }
2031 #contact-edit-poll-text {
2032     display: inline;
2033 }
2034 #contact-edit-end {
2035     clear: both;
2036     margin-bottom: 65px;
2037 }
2038 .contact-photo-menu-button {
2039     position: absolute;
2040     background: url("dark/photo-menu.jpg") top left no-repeat transparent;
2041     margin: 0px;
2042     padding: 0px;
2043     .box(16px, 16px);
2044     top: 64px;
2045     left: 0px;
2046     overflow: hidden;
2047     text-indent: 40px;
2048     display: none;
2049 }
2050 .contact-photo-menu {
2051     width: auto;
2052     .borders(2px, solid, @link_colour);
2053     background: @bg_colour;
2054     color: @main_colour;
2055     position: absolute;
2056     font-size: smaller;
2057     .rounded_corners;
2058     left: 0px;
2059     top: 90px;
2060     display: none;
2061     z-index: 10000;
2062     li a {
2063         display: block;
2064         padding: 4px;
2065         color: @link_colour;
2066         background: @main_colour;
2067         line-height: 1;
2068         &:hover {
2069             background: @link_colour;
2070             color: @main_colour;
2071             text-decoration: none;
2072         }
2073     }
2074 }
2075
2076
2077 /**
2078  * register, settings & profile forms
2079  */
2080 .openid {}
2081 #id_openid_url {
2082     background: url(dark/login-bg.gif) no-repeat;
2083     background-position: 0 50%;
2084     padding-left: 18px;
2085 }
2086 #settings-default-perms {
2087     margin-bottom: 20px;
2088 }
2089 #register-form div, #profile-edit-form div {
2090     clear: both;
2091 }
2092 .settings-block {
2093     label {
2094         clear: left;
2095     }
2096     input {
2097         margin: 10px 5px;
2098     }
2099 }
2100 #register-form label,
2101 #profile-edit-form label {
2102     width: 23em;
2103 }
2104 #register-form span,
2105 #profile-edit-form span {
2106     color: @menu_bg_colour;
2107     display: inline-block;
2108     margin-bottom: 20px;
2109 }
2110 #profile-edit-marital-label span {
2111     margin: -4px;
2112 }
2113 .settings-submit-wrapper,
2114 .profile-edit-submit-wrapper {
2115     margin: 0 0 30px;
2116 }
2117 .profile-edit-side-div {
2118     display: none;
2119 }
2120 #profiles-menu-trigger {
2121     margin: 0px 0px 0px 25px;
2122 }
2123 .profile-listing {
2124     float: left;
2125     margin: 20px 20px 0px 0px;
2126 }
2127 .icon-profile-edit {
2128     background: url("dark/icons.png") -150px 0px no-repeat;
2129     border: 0;
2130     cursor: pointer;
2131     display: block;
2132     .box(20px, 20px);
2133     margin: 0 0 -18px;
2134     text-decoration: none;
2135     top: 113px;
2136     right: 260px;
2137 }
2138 #profile-edit-links ul {
2139     .list_reset;
2140     margin: 20px 0;
2141 }
2142 .marital {
2143     margin-top: 5px;
2144 }
2145 #register-sitename {
2146     display: inline;
2147     font-weight: bold;
2148 }
2149 #advanced-expire-popup {
2150     background: @bg_colour;
2151     color: @main_colour;
2152 }
2153 #id_ssl_policy {
2154     width: 374px;
2155 }
2156 #theme-preview img {
2157     margin: 10px 10px 10px 288px;
2158 }
2159
2160
2161 /**
2162  * contacts selector
2163  */
2164 .group-delete-wrapper {
2165     margin: -31px 50px 0 0;
2166     float: right;
2167 }
2168 /*.group-delete-icon {
2169     margin: 0 0 0 10px;
2170 }*/
2171 #group-edit-submit-wrapper {
2172     margin: 0 0 10px 0;
2173     display: inline;
2174 }
2175 #group-members, #prof-members {
2176     height: 200px;
2177     overflow: auto;
2178     .borders(1px, solid, @menu_bg_colour);
2179     .rounded_corners(5px 5px 0 0);
2180 }
2181 #group-all-contacts, #prof-all-contacts {
2182     height: 200px;
2183     overflow: auto;
2184     .borders(1px, solid, @menu_bg_colour);
2185     .rounded_corners(0 0 5px 5px);
2186 }
2187 #group-members h3,
2188 #group-all-contacts h3,
2189 #prof-members h3,
2190 #prof-all-contacts h3 {
2191     color: @main_alt_colour;
2192     background-color: @menu_bg_colour;
2193     margin: 0;
2194     padding: 5px;
2195 }
2196 #group-separator, #prof-separator {
2197     display: none;
2198 }
2199
2200
2201 /**
2202  * profile
2203  */
2204 #cropimage-wrapper {
2205     float: left;
2206 }
2207 #crop-image-form {
2208     clear: both;
2209 }
2210
2211
2212 /**
2213  * intros
2214  */
2215 .intro-wrapper {
2216     margin-top: 20px;
2217 }
2218 .intro-fullname {
2219     font-size: 1.1em;
2220     font-weight: bold;
2221 }
2222 .intro-note {
2223     padding: 10px;
2224 }
2225 .intro-end {
2226     padding: 30px;
2227 }
2228 .intro-form {
2229     float: left;
2230 }
2231 .intro-approve-form {
2232     clear: both;
2233 }
2234 .intro-submit-approve,
2235 .intro-submit-ignore {
2236     margin-right: 20px;
2237 }
2238 .intro-submit-approve {
2239     margin-top: 15px;
2240 }
2241 .intro-approve-as-friend-label,
2242 .intro-approve-as-fan-label,
2243 .intro-approve-as-friend,
2244 .intro-approve-as-fan {
2245     float: left;
2246 }
2247 .intro-form-end {
2248     clear: both;
2249     margin-bottom: 10px;
2250 }
2251 .intro-approve-as-end {
2252     clear: both;
2253     margin-bottom: 10px;
2254 }
2255 .clear {
2256     clear: both;
2257 }
2258
2259
2260 /**
2261  * events
2262  */
2263 .eventcal {
2264     float: left;
2265     font-size: 20px;
2266 }
2267 .event {
2268     background: @bg_colour;
2269 }
2270 .vevent {
2271     border: 1px solid darken(@main_alt_colour, 13.5%);
2272     .event-description,
2273     .event-location,
2274     .event-start {
2275         margin-left: 10px;
2276         margin-right: 10px;
2277     }
2278 }
2279 #new-event-link {
2280     margin-bottom: 10px;
2281 }
2282 .edit-event-link,
2283 .plink-event-link {
2284   /*float: left;      */
2285   /*margin-top: 4px;  */
2286   /*margin-right: 4px;*/
2287   /*margin-bottom: 15px;*/
2288 }
2289 .event-description:before {
2290     content: url('../../../images/calendar.png');
2291     margin-right: 15px;
2292 }
2293 .event-start,
2294 .event-end {
2295     margin-left: 10px;
2296     width: 330px;
2297     font-size: smaller;
2298 }
2299 .event-start .dtstart,
2300 .event-end .dtend {
2301     float: right;
2302 }
2303 .event-list-date {
2304     margin-bottom: 10px;
2305 }
2306 .prevcal, .nextcal {
2307     float: left;
2308     margin: 64px 32px auto 32px;
2309 }
2310 .calendar {
2311     font-family: monospace;
2312 }
2313 .today {
2314     font-weight: bold;
2315     color: red;
2316 }
2317 #event-start-text,
2318 #event-finish-text {
2319     margin-top: 10px;
2320     margin-bottom: 5px;
2321 }
2322 #event-nofinish-checkbox,
2323 #event-nofinish-text,
2324 #event-adjust-checkbox,
2325 #event-adjust-text,
2326 #event-share-checkbox {
2327     float: left;
2328 }
2329 #event-datetime-break {
2330     margin-bottom: 10px;
2331 }
2332 #event-nofinish-break,
2333 #event-adjust-break,
2334 #event-share-break {
2335     clear: both;
2336 }
2337 #event-desc-text,
2338 #event-location-text {
2339     margin-top: 10px;
2340     margin-bottom: 5px;
2341 }
2342 #event-submit {
2343     margin-top: 10px;
2344 }
2345 .body-tag {
2346     margin: 10px 0;
2347     opacity: 0.5;
2348     &:hover {
2349         opacity: 1.0 !important;
2350     }
2351 }
2352 .filesavetags,
2353 .categorytags {
2354     margin: 20px 0;
2355     opacity: 0.5;
2356 }
2357 .filesavetags:hover,
2358 .categorytags:hover {
2359     margin: 20px 0;
2360     opacity: 1.0 !important;
2361 }
2362 .item-select {
2363     opacity: 0.1;
2364     margin: 5px 0 0 6px !important;
2365     &:hover {
2366         opacity: 1;
2367     }
2368 }
2369 .checkeditem {
2370     opacity: 1;
2371 }
2372 #item-delete-selected {
2373     margin: 3em 5px;
2374     position: relative;
2375     left: 4em;
2376         width: 15em;
2377     overflow: auto;
2378 }
2379 #item-delete-selected-icon {
2380     float: left;
2381     margin: 11px 5px;
2382 }
2383 .fc-state-highlight {
2384     background: @main_colour;
2385     color: @bg_colour;
2386 }
2387
2388
2389 /**
2390  * directory
2391  */
2392 .directory-item {
2393     float: left;
2394     margin: 0 5px 4px 0;
2395     padding: 3px;
2396     width: 180px;
2397     height: 250px;
2398     position: relative;
2399 }
2400
2401
2402 /**
2403  * sidebar
2404  */
2405 #group-sidebar {
2406     margin-bottom: 10px;
2407 }
2408 .categories-selected,
2409 .group-selected,
2410 .nets-selected,
2411 .fileas-selected {
2412     // padding: 4px;
2413     color: @bg_colour;
2414     // background: @main_colour;
2415     // .borders(1px, solid, @link_colour);
2416     .multibutton_active;
2417 }
2418 .categories-selected:hover,
2419 .group-selected:hover,
2420 .nets-selected:hover,
2421 .fileas-selected:hover {
2422 //     padding: 4px;
2423     // color: @bg_colour;
2424 //     background: @bg_colour;
2425 //     .borders(1px, solid, @link_colour);
2426 }
2427 .groupsideedit {
2428     margin-right: 10px;
2429 }
2430 #sidebar-group-ul {
2431     padding-left: 0;
2432 }
2433 #sidebar-group-list {
2434     margin: 0 0 5px 0;
2435     li {
2436         margin-top: 10px;
2437     }
2438     .icon {
2439         display: inline-block;
2440         .box(12px, 12px);
2441     }
2442 }
2443 .sidebar-group-element {
2444     .multibutton;
2445     .rounded_corners;
2446 }
2447 #sidebar-new-group {
2448     margin: auto;
2449     display: inline-block;
2450     color: @main_alt_colour;
2451     text-decoration: none;
2452     text-align: center;
2453 }
2454 #peoplefind-sidebar form {
2455     margin-bottom: 10px;
2456 }
2457 #sidebar-new-group {
2458     &:hover {
2459         /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
2460         /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
2461         /*background-color: #b20202;*/
2462     }
2463     &:active {
2464         position: relative;
2465         top: 1px;
2466     }
2467 }
2468 #side-peoplefind-url {
2469     .borders(1px, solid, darken(@main_alt_colour, 33.5%));
2470     margin-right: 3px;
2471     width: 75%;
2472 }
2473 .categories-ul,
2474 .nets-ul {
2475     .list_reset;
2476     li {
2477         margin: 10px 0 0;
2478     }
2479 }
2480 .categories-link,
2481 .nets-link,
2482 .nets-all {
2483     .multibutton;
2484     .rounded_corners;
2485     margin-left: 0px;
2486 }
2487 #netsearch-box {
2488     margin: 20px 0px 30px;
2489     width: 135px;
2490     #search-submit {
2491         margin: 5px 5px 0px 0px;
2492     }
2493 }
2494
2495
2496 /**
2497  * admin
2498  */
2499 #pending-update {
2500     float: right;
2501     color: white;
2502     font-weight: bold;
2503     background-color: red;
2504     padding: 0 0.3em;
2505 }
2506 .admin {
2507     &.linklist {
2508         border: 0;
2509         padding: 0;
2510     }
2511     &.link {
2512         .list_reset;
2513     }
2514 }
2515 #adminpage {
2516     color: @main_colour;
2517     background: @bg_colour;
2518     margin: 5px;
2519     padding: 10px;
2520     font-size: smaller;
2521     dl {
2522         clear: left;
2523         margin-bottom: 2px;
2524         padding-bottom: 2px;
2525         border-bottom: 1px solid @shadow_colour;
2526     }
2527     dt {
2528         width: 250px;
2529         float: left;
2530         font-weight: bold;
2531     }
2532     dd {
2533         margin-left: 250px;
2534     }
2535     h3 {
2536         border-bottom: 1px solid darken(@main_alt_colour, 13.5%);
2537     }
2538     .submit {
2539         clear: left;
2540     }
2541     #pluginslist {
2542         margin: 0;
2543         padding: 0;
2544     }
2545     .plugin {
2546         display: block;
2547         .borders(1px, solid, darken(@main_alt_colour, 40%));
2548         padding: 1em;
2549         margin-bottom: 5px;
2550         clear: left;
2551     }
2552     .toggleplugin {
2553         float: left;
2554         margin-right: 1em;
2555     }
2556     table {
2557         width: 100%;
2558         border-bottom: 1px solid @shadow_colour;
2559         margin: 5px 0;
2560         th {
2561             font-weight: bold;
2562             text-align: left;
2563         }
2564         td {
2565             padding: 5px;
2566             vertical-align: middle;
2567         }
2568         &#users {
2569             padding: 5px;
2570             img {
2571                 .box(16px, 16px);
2572             }
2573             a {
2574                 color: @main_colour;
2575                 text-decoration: underline;
2576             }
2577         }
2578     }
2579     td .icon {
2580         float: left;
2581     }
2582     .selectall {
2583         text-align: right;
2584     }
2585 }
2586 #users .name {
2587     color: @main_colour;
2588 }
2589 #users .tools {
2590     padding: 5px 0;
2591     vertical-align: middle;
2592 }
2593
2594
2595 /**
2596  * form fields
2597  */
2598 .field {
2599     overflow: auto;
2600 }
2601 .field .onoff {
2602     float: right;
2603     margin: 0 330px 0 auto;
2604     width: 80px;
2605     a {
2606         display: block;
2607         .borders(1px, solid, darken(@main_alt_colour, 53.5%));
2608         padding: 3px 6px 4px 10px;
2609         height: 16px;
2610         text-decoration: none;
2611     }
2612     .on, .off {
2613         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==');
2614         background-repeat: no-repeat;
2615     }
2616     .on {
2617         background-position: 42px 1px;
2618         background-color: darken(@main_alt_colour, 33.5%);
2619         color: darken(@main_alt_colour, 86.5%);
2620         text-align: left;
2621     }
2622     .off {
2623         background-position: 2px 1px;
2624         background-color: darken(@main_alt_colour, 13.5%);
2625         color: darken(@main_alt_colour, 73.5%);
2626         text-align: right;
2627     }
2628 }
2629 .hidden {
2630     display: none !important;
2631 }
2632 .field textarea {
2633     .box(80%, 100px);
2634 }
2635 .field_help {
2636     display: block;
2637     margin-left: 297px;
2638     color: darken(@main_alt_colour, 24%);
2639     font-size: small;
2640 }
2641 .field.radio .field_help {
2642     margin-left: 297px;
2643 }
2644
2645
2646 /*
2647  * update
2648  */
2649 .popup {
2650     .box(100%, 100%);
2651     top: 0px;
2652     left: 0px;
2653     position: absolute;
2654     display: none;
2655     .background {
2656         background-color: darken(@main_alt_colour, 86.5%);
2657         opacity: 0.5;
2658         .box(100%, 100%);
2659         position: absolute;
2660         top: 0px;
2661         left: 0px;
2662     }
2663     .panel {
2664         top: 25%;
2665         left: 25%;
2666         .box(50%, 50%);
2667         padding: 1em;
2668         position: absolute;
2669         .borders(4px, solid, black);
2670         background-color: white;
2671     }
2672 }
2673 #panel {
2674     position: absolute;
2675     font-size: small;
2676     .rounded_corners;
2677     .borders(1px, solid, @main_alt_colour);
2678     background-color: @bg_alt_colour;
2679     color: @main_colour;
2680     padding: 1em;
2681     z-index: 100;
2682 }
2683 .pager {
2684     margin-top: 60px;
2685     display: block;
2686     clear: both;
2687     text-align: center;
2688     font-size: small;
2689     font-weight: bold;
2690     span {
2691         padding: 4px;
2692         margin: 4px;
2693     }
2694 }
2695 .pager_current {
2696     background-color: @link_colour;
2697     color: @bg_colour;
2698 }
2699 .grey,
2700 .gray {
2701     color: gray;
2702 }
2703 .orange {
2704     color: orange;
2705 }
2706 .red {
2707     color: red;
2708 }
2709 .popup .panel {
2710     .panel_text {
2711         display: block;
2712         overflow: auto;
2713         height: 80%;
2714     }
2715     .panel_in {
2716         .box(100%, 100%);
2717         position: relative;
2718     }
2719     .panel_actions {
2720         width: 100%;
2721         bottom: 4px;
2722         left: 0px;
2723         position: absolute;
2724     }
2725 }
2726 .panel_text .progress {
2727     width: 50%;
2728     overflow: hidden;
2729     height: auto;
2730     .borders(1px, solid, darken(@main_alt_colour, 13.5%));
2731     margin-bottom: 5px;
2732     span {
2733         float: right;
2734         display: block;
2735         width: 25%;
2736         background-color: @main_alt_colour;
2737         text-align: right;
2738     }
2739 }
2740
2741
2742 /**
2743  * OAuth
2744  */
2745 .oauthapp {
2746     height: auto;
2747     overflow: auto;
2748     border-bottom: 2px solid darken(@main_alt_colour, 13.5%);
2749     padding-bottom: 1em;
2750     margin-bottom: 1em;
2751     img {
2752         float: left;
2753         .box(48px, 48px);
2754         margin: 10px;
2755         &.noicon {
2756             background-image: url("../../../images/icons/48/plugin.png");
2757             background-position: center center;
2758             background-repeat: no-repeat;
2759         }
2760     }
2761     a {
2762         float: left;
2763     }
2764 }
2765
2766
2767 /**
2768  * icons
2769  */
2770 .iconspacer {
2771     display: block;
2772     .box(16px, 16px);
2773 }
2774 .icon {
2775     display: block;
2776     .box;
2777     background: transparent url("dark/icons.png") no-repeat;
2778     border: 0;
2779     text-decoration: none;
2780     .rounded_corners;
2781     &:hover {
2782         border: 0;
2783         text-decoration: none;
2784     }
2785 }
2786 .editicon {
2787     display: inline-block;
2788     .box(21px, 21px);
2789     background: url("dark/editicons.png") no-repeat;
2790     border: 0;
2791     text-decoration: none;
2792 }
2793 .shadow {
2794     .box_shadow(2px, 2px, 5px, 2px);
2795     &:active, &:focus, &:hover {
2796         .box_shadow(0, 0, 0, 0);
2797     }
2798 }
2799 .editicon:hover {
2800     border: 0;
2801 }
2802 .boldbb {
2803     background-position: 0px 0px;
2804     &:hover {
2805         background-position: -22px 0px; }
2806 }
2807 .italicbb {
2808     background-position: 0px -22px;
2809     &:hover {
2810         background-position: -22px -22px; }
2811 }
2812 .underlinebb {
2813     background-position: 0px -44px;
2814     &:hover {
2815         background-position: -22px -44px; }
2816 }
2817 .quotebb {
2818     background-position: 0px -66px;
2819     &:hover {
2820         background-position: -22px -66px; }
2821 }
2822 .codebb {
2823     background-position: 0px -88px;
2824     &:hover {
2825         background-position: -22px -88px; }
2826 }
2827 .imagebb {
2828     background-position: -44px 0px;
2829     &:hover {
2830         background-position: -66px 0px; }
2831 }
2832 .urlbb {
2833     background-position: -44px -22px;
2834     &:hover {
2835         background-position: -66px -22px; }
2836 }
2837 .videobb {
2838     background-position: -44px -44px;
2839     &:hover {
2840         background-position: -66px -44px; }
2841 }
2842 .icon {
2843     &.drop, &.drophide, &.delete {
2844         float: left;
2845         margin: 0 2px;
2846     }
2847     &.s22 {
2848         &.delete {
2849             display: block;
2850             background-position: -110px 0;
2851         }
2852         &.text {
2853             padding: 10px 0px 0px 25px;
2854             width: 200px;
2855         }
2856     }
2857     &.text {
2858         text-indent: 0px;
2859     }
2860     &.s16 {
2861         min-width: 16px;
2862         height: 16px;
2863     }
2864 }
2865 // special case for wall items
2866 .wall-item-delete-wrapper.icon.delete,
2867 .wall-item-delete-wrapper.icon.drophide {
2868     margin: 0;
2869 }
2870 .s16 .add {
2871     background: url("../../../images/icons/16/add.png") no-repeat;
2872 }
2873 .add {
2874     margin: 0px 5px;
2875 }
2876 .article {
2877     background-position: -50px 0;
2878 }
2879 .audio {
2880     background-position: -70px 0;
2881 }
2882 .block {
2883     background-position: -90px 0px;
2884 }
2885 .drop, .delete {
2886     background-position: -110px 0;
2887 }
2888 .drophide {
2889     background-position: -130px 0;
2890 }
2891 .edit {
2892     background-position: -150px 0;
2893 }
2894 .camera {
2895     background-position: -170px 0;
2896 }
2897 .dislike {
2898     background-position: -190px 0;
2899 }
2900 .file-as {
2901     background-position: -230px -60px;
2902 }
2903 .like {
2904     background-position: -211px 0;
2905 }
2906 .link {
2907     background-position: -230px 0;
2908 }
2909 .globe,
2910 .location {
2911     background-position: -50px -20px;
2912 }
2913 .noglobe,
2914 .nolocation {
2915     background-position: -70px -20px;
2916 }
2917 .no {
2918     background-position: -90px -20px;
2919 }
2920 .pause {
2921     background-position: -110px -20px;
2922 }
2923 .play {
2924     background-position: -130px -20px;
2925 }
2926 .pencil {
2927     background-position: -151px -18px;
2928 }
2929 .small-pencil {
2930     background-position: -170px -20px;
2931 }
2932 .recycle {
2933     background-position: -190px -20px;
2934 }
2935 .remote-link {
2936     background-position: -210px -20px;
2937 }
2938 .share {
2939     background-position: -230px -20px;
2940 }
2941 .tools {
2942     background-position: -50px -40px;
2943 }
2944 .lock {
2945     background-position: -70px -40px;
2946 }
2947 .unlock {
2948     background-position: -88px -40px;
2949 }
2950 .video {
2951     background-position: -110px -40px;
2952 }
2953 .attach {
2954     background-position: -191px -40px;
2955 }
2956 .language {
2957     background-position: -210px -40px;
2958 }
2959 .starred {
2960     background-position: -130px -60px;
2961 }
2962 .unstarred {
2963     background-position: -150px -60px;
2964 }
2965 .tagged {
2966     background-position: -170px -60px;
2967 }
2968 .on {
2969     background-position: -50px -60px;
2970 }
2971 .off {
2972     background-position: -70px -60px;
2973 }
2974 .prev {
2975     background-position: -90px -60px;
2976 }
2977 .next {
2978     background-position: -110px -60px;
2979 }
2980 .icon.dim {
2981     opacity: 0.3;
2982 }
2983 #pause {
2984     position: fixed;
2985     bottom: 40px;
2986     right: 30px;
2987     z-index: 10;
2988 }
2989 .border {
2990     .borders(1px, solid, @border2);
2991     .rounded_corners;
2992     &:hover {
2993         .borders(1px, solid, @border2);
2994         .rounded_corners;
2995     }
2996 }
2997 .attachtype {
2998     display: block;
2999     .box(20px, 23px);
3000     background-image: url(../../../images/content-types.png);
3001         background-position: -80px 0px;
3002 }
3003 .type-video {
3004     background-position: 0px 0px;
3005 }
3006 .type-image {
3007     background-position: -20px 0;
3008 }
3009 .type-audio {
3010     background-position: -40px 0;
3011 }
3012 .type-text {
3013     background-position: -60px 0px;
3014 }
3015 .type-unkn {
3016     background-position: -80px 0;
3017 }
3018
3019
3020 /**
3021  * footer
3022  */
3023 .cc-license {
3024     margin-top: 100px;
3025     font-size: 0.7em;
3026 }
3027 footer {
3028     display: block;
3029     clear: both;
3030 }
3031 #sectionfooter {
3032     margin: 1em 0 1em 0;
3033 }
3034 #profile-jot-text {
3035     height: 20px;
3036     color: @main_colour;
3037     background: @bg_colour;
3038     .borders;
3039     .rounded_corners;
3040     width: 99.5%;
3041 }
3042
3043
3044 /**
3045  * acl
3046  */
3047 #photo-edit-perms-select,
3048 #photos-upload-permissions-wrapper,
3049 #profile-jot-acl-wrapper {
3050     display: block !important;
3051     background: @bg_colour;
3052     color: @main_colour;
3053 }
3054 #profile-jot-acl-wrapper {
3055     margin: 0 10px;
3056     .borders(1px, solid, @menu_bg_colour);
3057     border-top: 0;
3058     font-size: small;
3059     // .box_shadow;
3060 }
3061 #acl-wrapper {
3062     width: 660px;
3063     margin: 0 auto;
3064 }
3065 #acl-search {
3066     float: right;
3067     background: white url("../../../images/search_18.png") no-repeat right center;
3068     padding-right: 20px;
3069     margin: 6px;
3070     color: @shadow_colour;
3071 }
3072 #acl-showall {
3073     float: left;
3074     display: block;
3075     .box(auto, 18px);
3076     background: @main_colour url("../../../images/show_all_off.png") 8px 8px no-repeat;
3077     padding: 7px 10px 7px 30px;
3078     .rounded_corners;
3079     color: darken(@main_alt_colour, 33.5%);
3080     margin: 5px 0;
3081     &.selected {
3082         color: black;
3083         background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat;
3084     }
3085 }
3086 #acl-list {
3087     height: 210px;
3088     .borders(1px, solid, darken(@main_alt_colour, 13.5%);
3089     clear: both;
3090     margin-top: 30px;
3091     overflow: auto;
3092 }
3093 /*#acl-list-content {
3094 }*/
3095 .acl-list-item {
3096     .borders;
3097     .box(120px, 110px);
3098     display: block;
3099     float: left;
3100     margin: 3px 0 5px 5px;
3101     img {
3102         .box(22px, 22px);
3103         float: left;
3104         margin: 5px 5px 20px;
3105     }
3106     p {
3107         height: 12px;
3108         font-size: 10px;
3109         margin: 0 0 22px;
3110         padding: 2px 0 1px;
3111     }
3112     a {
3113         background: @main_colour 3px 3px no-repeat;
3114         .rounded_corners;
3115         .box(55px, 20px);
3116         clear: both;
3117         font-size: 10px;
3118         display: block;
3119         color: @bg_colour;
3120         margin: 5px auto 0;
3121         padding: 0 3px;
3122         text-align: center;
3123         vertical-align: middle;
3124     }
3125 }
3126 #acl-wrapper a:hover {
3127     text-decoration: none;
3128     color: @bg_colour;
3129     border: 0;
3130 }
3131 //data URI:
3132 // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
3133 .acl-button-show {
3134     // background-image: url('../../../images/show_off.png');
3135     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg==');
3136     margin: 0 auto;
3137 }
3138 .acl-button-hide {
3139     // background-image: url('../../../images/hide_off.png');
3140     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII=');
3141     margin: 0 auto;
3142 }
3143 .acl-button-show.selected {
3144     // background: #9ade00 url(../../../images/show_on.png);
3145     background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII=');
3146     color: @bg_colour;
3147 }
3148 .acl-button-hide.selected {
3149     // background: #ff4141 url(../../../images/hide_on.png);
3150     background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg==');
3151     color: @bg_colour;
3152 }
3153 .acl-list-item {
3154     &.groupshow {
3155         border-color: @group_show;
3156     }
3157     &.grouphide {
3158         border-color: @group_hide;
3159     }
3160 }
3161 /** /acl **/
3162
3163
3164 /* autocomplete popup */
3165 .acpopup {
3166     max-height: 175px;
3167     max-width: 42%;
3168     background-color: @menu_bg_colour;
3169     color: white;
3170     overflow: auto;
3171     z-index: 100000;
3172     border: 1px solid darken(@main_alt_colour, 13.5%);
3173 }
3174 .acpopupitem {
3175     background-color: @menu_bg_colour;
3176     padding: 4px;
3177     clear: left;
3178     img {
3179         float: left;
3180         margin-right: 4px;
3181     }
3182     &.selected {
3183         color: @bg_alt_colour;
3184         background-color: @main_alt_colour;
3185     }
3186 }
3187 .qcomment-wrapper {
3188     padding: 0px;
3189     margin: 5px 5px 5px 81%;
3190 }
3191 .qcomment {
3192     opacity: 0.5;
3193     &:hover {
3194         opacity: 1.0;
3195     }
3196 }
3197 #network-star-link {
3198     margin-top: 10px;
3199 }
3200 .network-star {
3201     float: left;
3202     margin-right: 5px;
3203     &.icon.starred {
3204         display: inline-block;
3205     }
3206 }
3207 #fileas-sidebar {}
3208
3209 .fileas-ul {
3210     padding: 0;
3211 }
3212
3213
3214 /*
3215  * addons theming
3216  */
3217 #sidebar-page-list {
3218     ul {
3219         padding: 0;
3220         margin: 5px 0;
3221     }
3222     li {
3223         list-style: none;
3224     }
3225 }
3226 #jappix_mini {
3227     margin-left: 130px;
3228     position: fixed;
3229     bottom: 0;
3230     /* override the jappix css */
3231     right: 175px !important;
3232     z-index: 999;
3233 }
3234
3235 #fancybox-content {
3236         color: #111;
3237 }
3238
3239 @import "../css/media";