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