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