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