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