view/theme/dispy/light/style.less

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