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