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