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