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