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