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