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     .wall-item-outside-wrapper {
1263         border: 0;
1264         .rounded_corners(0px 0px 0px 0px);
1265         .box_shadow(0, 0, 0, 0);
1266     }
1267 }
1268
1269
1270 /**
1271  * section
1272  */
1273 #sectionmain {
1274     margin: 1em;
1275     font-size: 0.8em;
1276     min-width: 475px;
1277     width: 69%;
1278     float: left;
1279     display: inline;
1280 }
1281
1282
1283 /**
1284  * tabs
1285  */
1286 .tabs {
1287     .list_reset;
1288     margin: 10px 0;
1289     li {
1290         display: inline;
1291         font-size: smaller;
1292     }
1293 }
1294 .multibutton () {
1295     .borders(1px, solid, @hover_colour);
1296     padding: 4px;
1297     .rounded_corners;
1298     &:active,
1299     &:hover {
1300         background: @shiny_colour;
1301         color: @main_colour;
1302         .borders(1px, solid, @hover_colour);
1303     }
1304     a {
1305         border: 0;
1306         text-decoration: none;
1307     }
1308 }
1309 .multibutton_active () {
1310     background: @dk_bg_colour;
1311     color: @bg_colour;
1312     .borders(1px, solid, @hover_colour);
1313     padding: 4px;
1314     .rounded_corners;
1315     &:hover {
1316         background: @shiny_colour;
1317         color: @main_colour;
1318         .borders(1px, solid, @hover_colour);
1319     }
1320     a {
1321         color: @bg_colour;
1322         text-decoration: none;
1323     }
1324 }
1325 .tab {
1326     .multibutton;
1327 }
1328 .tab {
1329     &.active {
1330         .multibutton_active;
1331     }
1332 }
1333
1334
1335 /**
1336  * items
1337  */
1338 .wall-item-outside-wrapper {
1339     .borders(1px, solid, darken(@main_alt_colour, 27%));
1340     .rounded_corners;
1341     .box_shadow(6px, 1px, 10px, -2px);//@lt_shadow_colour
1342     &.comment {
1343         margin-top: 5px;
1344     }
1345 }
1346 .wall-item-content-wrapper {
1347     position: relative;
1348     padding: 0.75em;
1349     width: auto;
1350 }
1351 .wall-item-outside-wrapper .wall-item-comment-wrapper {
1352     /*margin-left: 90px;*/
1353     .preview {
1354         border: 0;
1355         .rounded_corners(0px);
1356     }
1357 }
1358 .shiny {
1359     background: @shiny_colour;
1360     .rounded_corners;
1361 }
1362 .wall-outside-wrapper .shiny {
1363     .rounded_corners;
1364 }
1365 .heart {
1366     color: red;
1367 }
1368 .wall-item-content {
1369     overflow-x: auto;
1370     margin: 0px 4em 1em 5px;
1371 }
1372 [id^="tread-wrapper"],
1373 [class^="tread-wrapper"] {
1374     margin: 1.2em 0 0 0;
1375     padding: 0px;
1376 }
1377 .wall-item-photo-menu {
1378     display: none;
1379 }
1380 .wall-item-photo-menu-button {
1381     display: none;
1382     text-indent: -99999px;
1383     background: @menu_bg_colour url(light/menu-user-pin.jpg) no-repeat 75px center;
1384     position: absolute;
1385     overflow: hidden;
1386     .box(90px, 20px);
1387     top: 85px;
1388     left: 0;
1389     .rounded_corners(0 0 5px 5px);
1390 }
1391 .wall-item-info {
1392     float: left;
1393     width: 7em;
1394     position: relative;
1395 }
1396 .wall-item-photo-wrapper {
1397     .box(80px, 80px);
1398     position: relative;
1399     padding: 5px;
1400     background-color: @menu_bg_colour;
1401     .rounded_corners;
1402 }
1403 [class^="wall-item-tools"] * {
1404     /*margin: 0 0 5px 0;*/
1405     > * {
1406         /*margin: 0 0 5px 0;*/
1407     }
1408 }
1409 .wall-item-tools {
1410     float: right;
1411     opacity: 0.4;
1412     .transition;
1413     &:hover {
1414         opacity: 1;
1415         .transition;
1416     }
1417 }
1418 .wall-item-subtools1 {
1419     .box(30px, 30px);
1420     list-style: none outside none;
1421     margin: 18px 0 30px -20px;
1422     padding: 0;
1423 }
1424 .wall-item-subtools2 {
1425     .box(25px, 25px);
1426     list-style: none outside none;
1427     margin: -78px 0 0 5px;
1428     padding: 0;
1429 }
1430 .wall-item-title {
1431     font-size: 1.2em;
1432     font-weight: bold;
1433     margin-bottom: 1.4em;
1434 }
1435 .wall-item-body {
1436     margin: 1em;
1437     text-align: left;
1438     overflow-x: auto;
1439 }
1440 .wall-item-lock-wrapper {
1441     float: right;
1442     .box(22px, 22px);
1443     margin: 0 -5px 0 0;
1444     opacity: 1;
1445 }
1446 .wall-item-dislike,
1447 .wall-item-like {
1448     clear: left;
1449     font-size: 0.8em;
1450     color: @main_colour;
1451     margin: 5px 0 5px 10.2em;
1452     .transition;
1453     opacity: 0.5;
1454     &:hover {
1455         opacity: 1;
1456     }
1457 }
1458 .wall-item-author,
1459 .wall-item-actions-author,
1460 .wall-item-ago {
1461     color: @main_colour;
1462     line-height: 1;
1463     display: inline-block;
1464     font-size: x-small;
1465     margin: 0.5em auto;
1466     font-weight: bold;
1467 }
1468 .comment-edit-preview {
1469     width: auto;
1470     margin: auto auto auto -2em;
1471     &.wall-item-author,
1472     &.wall-item-actions-author,
1473     &.wall-item-ago {
1474         font-size: smaller;
1475     }
1476 }
1477 .wall-item-location {
1478     margin-top: 2em;
1479     width: 6em;
1480     overflow: hidden;
1481     .text_overflow;
1482     .icon {
1483         float: left;
1484     }
1485     > a,
1486     .smalltext {
1487         margin-left: 25px;
1488         font-size: 0.7em;
1489         display: block;
1490     }
1491     > br {
1492         display: none;
1493     }
1494 }
1495 .wallwall {
1496     .wwto {
1497         left: 5px;
1498         margin: 0;
1499         position: absolute;
1500         top: 75px;
1501         z-index: 10001;
1502         .box(30px, 30px);
1503         img {
1504             width: 30px !important;
1505             height: 30px !important;
1506         }
1507     }
1508     .wall-item-photo-end {
1509         clear: both;
1510     }
1511 }
1512 .wall-item-arrowphoto-wrapper {
1513     position: absolute;
1514     left: 35px;
1515     top: 80px;
1516     z-index: 10002;
1517 }
1518 .wall-item-photo-menu {
1519     min-width: 92px;
1520     font-size: 0.75em;
1521     .borders(2px, solid, @menu_bg_colour);
1522     border-top: 0px;
1523     background: @menu_bg_colour;
1524     position: absolute;
1525     left: -2px;
1526     top: 101px;
1527     display: none;
1528     z-index: 10003;
1529     .rounded_corners(0 5px 5px 5px);
1530     li a {
1531         white-space: nowrap;
1532         display: block;
1533         padding: 5px 6px;
1534         color: @bg_colour;
1535         &:hover {
1536             color: @menu_bg_colour;
1537             background: @bg_colour;
1538         }
1539     }
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: 3em 5px;
2374     position: relative;
2375     left: 4em;
2376         width: 15em;
2377     overflow: auto;
2378 }
2379 #item-delete-selected-icon {
2380     float: left;
2381     margin: 11px 5px;
2382 }
2383 .fc-state-highlight {
2384     background: @bg_colour;
2385     color: @main_colour;
2386 }
2387
2388
2389 /**
2390  * directory
2391  */
2392 .directory-item {
2393     float: left;
2394     margin: 0 5px 4px 0;
2395     padding: 3px;
2396     width: 180px;
2397     height: 250px;
2398     position: relative;
2399 }
2400
2401
2402 /**
2403  * sidebar
2404  */
2405 #group-sidebar {
2406     margin-bottom: 10px;
2407 }
2408 .categories-selected,
2409 .group-selected,
2410 .nets-selected,
2411 .fileas-selected {
2412     // padding: 4px;
2413     color: @main_colour;
2414     // background: @dk_bg_colour;
2415     // .borders(1px, solid, @hover_colour);
2416     .multibutton_active;
2417 }
2418 .categories-selected:hover,
2419 .group-selected:hover,
2420 .nets-selected:hover,
2421 .fileas-selected:hover {
2422 //     padding: 4px;
2423     // color: @link_colour;
2424 //     background: @bg_colour;
2425 //     .borders(1px, solid, @link_colour);
2426 }
2427 .groupsideedit {
2428     margin-right: 10px;
2429 }
2430 #sidebar-group-ul {
2431     padding-left: 0;
2432 }
2433 #sidebar-group-list {
2434     margin: 0 0 5px 0;
2435     li {
2436         margin-top: 10px;
2437     }
2438     .icon {
2439         display: inline-block;
2440         .box(12px, 12px);
2441     }
2442 }
2443 .sidebar-group-element {
2444     .multibutton;
2445     .rounded_corners;
2446 }
2447 #sidebar-new-group {
2448     margin: auto;
2449     display: inline-block;
2450     color: @bg_colour;
2451     text-decoration: none;
2452     text-align: center;
2453 }
2454 #peoplefind-sidebar form {
2455     margin-bottom: 10px;
2456 }
2457 #sidebar-new-group {
2458     &:hover {
2459         /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
2460         /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
2461         /*background-color: #b20202;*/
2462     }
2463     &:active {
2464         position: relative;
2465         top: 1px;
2466     }
2467 }
2468 #side-peoplefind-url {
2469     .borders(1px, solid, darken(@main_alt_colour, 20%));
2470     margin-right: 3px;
2471     width: 75%;
2472 }
2473 .categories-ul,
2474 .nets-ul {
2475     .list_reset;
2476     li {
2477         margin: 10px 0 0;
2478     }
2479 }
2480 .categories-link,
2481 .nets-link,
2482 .nets-all {
2483     .multibutton;
2484     .rounded_corners;
2485     margin-left: 0px;
2486 }
2487 #netsearch-box {
2488     margin: 20px 0px 30px;
2489     width: 135px;
2490     #search-submit {
2491         margin: 5px 5px 0px 0px;
2492     }
2493 }
2494
2495
2496 /**
2497  * admin
2498  */
2499 #pending-update {
2500     float: right;
2501     color: white;
2502     font-weight: bold;
2503     background-color: red;
2504     padding: 0 0.3em;
2505 }
2506 .admin {
2507     &.linklist {
2508         border: 0;
2509         padding: 0;
2510     }
2511     &.link {
2512         .list_reset;
2513     }
2514 }
2515 #adminpage {
2516     color: @main_colour;
2517     background: @bg_colour;
2518     margin: 5px;
2519     padding: 10px;
2520     font-size: smaller;
2521     dl {
2522         clear: left;
2523         margin-bottom: 2px;
2524         padding-bottom: 2px;
2525         border-bottom: 1px solid @shadow_colour;
2526     }
2527     dt {
2528         width: 250px;
2529         float: left;
2530         font-weight: bold;
2531     }
2532     dd {
2533         margin-left: 250px;
2534     }
2535     h3 {
2536         border-bottom: 1px solid lighten(@main_alt_colour, 20%);
2537     }
2538     .submit {
2539         clear: left;
2540     }
2541     #pluginslist {
2542         margin: 0;
2543         padding: 0;
2544     }
2545     .plugin {
2546         display: block;
2547         .borders(1px, solid, darken(@main_alt_colour, 6.5%));
2548         padding: 1em;
2549         margin-bottom: 5px;
2550         clear: left;
2551     }
2552     .toggleplugin {
2553         float: left;
2554         margin-right: 1em;
2555     }
2556     table {
2557         width: 100%;
2558         border-bottom: 1px solid @shadow_colour;
2559         margin: 5px 0;
2560         th {
2561             font-weight: bold;
2562             text-align: left;
2563         }
2564         td {
2565             padding: 5px;
2566             vertical-align: middle;
2567         }
2568         &#users {
2569             padding: 5px;
2570             img {
2571                 .box(16px, 16px);
2572             }
2573             a {
2574                 color: @main_colour;
2575                 text-decoration: underline;
2576             }
2577         }
2578     }
2579     td .icon {
2580         float: left;
2581     }
2582     .selectall {
2583         text-align: right;
2584     }
2585 }
2586 #users .name {
2587     color: @main_colour;
2588 }
2589 #users .tools {
2590     padding: 5px 0;
2591     vertical-align: middle;
2592 }
2593
2594
2595 /**
2596  * form fields
2597  */
2598 .field {
2599     overflow: auto;
2600 }
2601 .field .onoff {
2602     float: right;
2603     margin: 0 330px 0 auto;
2604     width: 80px;
2605     a {
2606         display: block;
2607         .borders(1px, solid, darken(@main_alt_colour, 20%));
2608         padding: 3px 6px 4px 10px;
2609         height: 16px;
2610         text-decoration: none;
2611     }
2612     .on, .off {
2613         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==');
2614         background-repeat: no-repeat;
2615     }
2616     .on {
2617         background-position: 42px 1px;
2618         background-color: darken(@main_alt_colour, 40%);
2619         color: lighten(@main_alt_colour, 20%);
2620         text-align: left;
2621     }
2622     .off {
2623         background-position: 2px 1px;
2624         background-color: lighten(@main_alt_colour, 20%);
2625         color: darken(@main_alt_colour, 40%);
2626         text-align: right;
2627     }
2628 }
2629 .hidden {
2630     display: none !important;
2631 }
2632 .field textarea {
2633     .box(80%, 100px);
2634 }
2635 .field_help {
2636     display: block;
2637     margin-left: 297px;
2638     color: darken(@main_alt_colour, 20%);
2639     font-size: small;
2640 }
2641 .field.radio .field_help {
2642     margin-left: 297px;
2643 }
2644
2645
2646 /*
2647  * update
2648  */
2649 .popup {
2650     .box(100%, 100%);
2651     top: 0px;
2652     left: 0px;
2653     position: absolute;
2654     display: none;
2655     .background {
2656         background-color: @main_colour;
2657         opacity: 0.5;
2658         .box(100%, 100%);
2659         position: absolute;
2660         top: 0px;
2661         left: 0px;
2662     }
2663     .panel {
2664         top: 25%;
2665         left: 25%;
2666         .box(50%, 50%);
2667         padding: 1em;
2668         position: absolute;
2669         .borders(4px, solid, black);
2670         background-color: white;
2671     }
2672 }
2673 #panel {
2674     position: absolute;
2675     font-size: small;
2676     .rounded_corners;
2677     .borders(1px, solid, @bg_colour);
2678     background-color: @dk_bg_colour;
2679     color: @bg_colour;
2680     padding: 1em;
2681     z-index: 100;
2682 }
2683 .pager {
2684     margin-top: 60px;
2685     display: block;
2686     clear: both;
2687     text-align: center;
2688     font-size: small;
2689     font-weight: bold;
2690     span {
2691         padding: 4px;
2692         margin: 4px;
2693     }
2694 }
2695 .pager_current {
2696     background-color: @link_colour;
2697     color: @bg_colour;
2698 }
2699 .grey,
2700 .gray {
2701     color: gray;
2702 }
2703 .orange {
2704     color: orange;
2705 }
2706 .red {
2707     color: red;
2708 }
2709 .popup .panel {
2710     .panel_text {
2711         display: block;
2712         overflow: auto;
2713         height: 80%;
2714     }
2715     .panel_in {
2716         .box(100%, 100%);
2717         position: relative;
2718     }
2719     .panel_actions {
2720         width: 100%;
2721         bottom: 4px;
2722         left: 0px;
2723         position: absolute;
2724     }
2725 }
2726 .panel_text .progress {
2727     width: 50%;
2728     overflow: hidden;
2729     height: auto;
2730     .borders(1px, solid, lighten(@main_alt_colour, 20%));
2731     margin-bottom: 5px;
2732     span {
2733         float: right;
2734         display: block;
2735         width: 25%;
2736         background-color: @bg_colour;
2737         text-align: right;
2738     }
2739 }
2740
2741
2742 /**
2743  * OAuth
2744  */
2745 .oauthapp {
2746     height: auto;
2747     overflow: auto;
2748     border-bottom: 2px solid lighten(@main_alt_colour, 20%);
2749     padding-bottom: 1em;
2750     margin-bottom: 1em;
2751     img {
2752         float: left;
2753         .box(48px, 48px);
2754         margin: 10px;
2755         &.noicon {
2756             background-image: url("../../../images/icons/48/plugin.png");
2757             background-position: center center;
2758             background-repeat: no-repeat;
2759         }
2760     }
2761     a {
2762         float: left;
2763     }
2764 }
2765
2766
2767 /**
2768  * icons
2769  */
2770 .iconspacer {
2771     display: block;
2772     .box(16px, 16px);
2773 }
2774 .icon {
2775     display: block;
2776     .box;
2777     background: transparent url("light/icons.png") no-repeat;
2778     border: 0;
2779     text-decoration: none;
2780     .rounded_corners;
2781     &:hover {
2782         border: 0;
2783         text-decoration: none;
2784     }
2785 }
2786 .editicon {
2787     display: inline-block;
2788     .box(21px, 21px);
2789     background: url("light/editicons.png") no-repeat;
2790     border: 0;
2791     text-decoration: none;
2792 }
2793 .shadow {
2794     .box_shadow(2px, 2px, 5px, 2px);
2795     &:active, &:focus, &:hover {
2796         .box_shadow(0, 0, 0, 0);
2797     }
2798 }
2799 .editicon:hover {
2800     border: 0;
2801 }
2802 .boldbb {
2803     background-position: 0px 0px;
2804     &:hover {
2805         background-position: -22px 0px; }
2806 }
2807 .italicbb {
2808     background-position: 0px -22px;
2809     &:hover {
2810         background-position: -22px -22px; }
2811 }
2812 .underlinebb {
2813     background-position: 0px -44px;
2814     &:hover {
2815         background-position: -22px -44px; }
2816 }
2817 .quotebb {
2818     background-position: 0px -66px;
2819     &:hover {
2820         background-position: -22px -66px; }
2821 }
2822 .codebb {
2823     background-position: 0px -88px;
2824     &:hover {
2825         background-position: -22px -88px; }
2826 }
2827 .imagebb {
2828     background-position: -44px 0px;
2829     &:hover {
2830         background-position: -66px 0px; }
2831 }
2832 .urlbb {
2833     background-position: -44px -22px;
2834     &:hover {
2835         background-position: -66px -22px; }
2836 }
2837 .videobb {
2838     background-position: -44px -44px;
2839     &:hover {
2840         background-position: -66px -44px; }
2841 }
2842 .icon {
2843     &.drop, &.drophide, &.delete {
2844         float: left;
2845         margin: 0 2px;
2846     }
2847     &.s22 {
2848         &.delete {
2849             display: block;
2850             background-position: -110px 0;
2851         }
2852         &.text {
2853             padding: 10px 0px 0px 25px;
2854             width: 200px;
2855         }
2856     }
2857     &.text {
2858         text-indent: 0px;
2859     }
2860     &.s16 {
2861         min-width: 16px;
2862         height: 16px;
2863     }
2864 }
2865 // special case for wall items
2866 .wall-item-delete-wrapper.icon.delete,
2867 .wall-item-delete-wrapper.icon.drophide {
2868     margin: 0;
2869 }
2870 .s16 .add {
2871     background: url("../../../images/icons/16/add.png") no-repeat;
2872 }
2873 .add {
2874     margin: 0px 5px;
2875 }
2876 .article {
2877     background-position: -50px 0;
2878 }
2879 .audio {
2880     background-position: -70px 0;
2881 }
2882 .block {
2883     background-position: -90px 0px;
2884 }
2885 .drop, .delete {
2886     background-position: -110px 0;
2887 }
2888 .drophide {
2889     background-position: -130px 0;
2890 }
2891 .edit {
2892     background-position: -150px 0;
2893 }
2894 .camera {
2895     background-position: -170px 0;
2896 }
2897 .dislike {
2898     background-position: -190px 0;
2899 }
2900 .file-as {
2901     background-position: -230px -60px;
2902 }
2903 .like {
2904     background-position: -211px 0;
2905 }
2906 .link {
2907     background-position: -230px 0;
2908 }
2909 .globe,
2910 .location {
2911     background-position: -50px -20px;
2912 }
2913 .noglobe,
2914 .nolocation {
2915     background-position: -70px -20px;
2916 }
2917 .no {
2918     background-position: -90px -20px;
2919 }
2920 .pause {
2921     background-position: -110px -20px;
2922 }
2923 .play {
2924     background-position: -130px -20px;
2925 }
2926 .pencil {
2927     background-position: -151px -18px;
2928 }
2929 .small-pencil {
2930     background-position: -170px -20px;
2931 }
2932 .recycle {
2933     background-position: -190px -20px;
2934 }
2935 .remote-link {
2936     background-position: -210px -20px;
2937 }
2938 .share {
2939     background-position: -230px -20px;
2940 }
2941 .tools {
2942     background-position: -50px -40px;
2943 }
2944 .lock {
2945     background-position: -70px -40px;
2946 }
2947 .unlock {
2948     background-position: -88px -40px;
2949 }
2950 .video {
2951     background-position: -110px -40px;
2952 }
2953 .attach {
2954     background-position: -191px -40px;
2955 }
2956 .language {
2957     background-position: -210px -40px;
2958 }
2959 .starred {
2960     background-position: -130px -60px;
2961 }
2962 .unstarred {
2963     background-position: -150px -60px;
2964 }
2965 .tagged {
2966     background-position: -170px -60px;
2967 }
2968 .on {
2969     background-position: -50px -60px;
2970 }
2971 .off {
2972     background-position: -70px -60px;
2973 }
2974 .prev {
2975     background-position: -90px -60px;
2976 }
2977 .next {
2978     background-position: -110px -60px;
2979 }
2980 .icon.dim {
2981     opacity: 0.3;
2982 }
2983 #pause {
2984     position: fixed;
2985     bottom: 40px;
2986     right: 30px;
2987     z-index: 10;
2988 }
2989 .border {
2990     .borders(1px, solid, @border2);
2991     .rounded_corners;
2992     &:hover {
2993         .borders(1px, solid, @border2);
2994         .rounded_corners;
2995     }
2996 }
2997 .attachtype {
2998     display: block;
2999     .box(20px, 23px);
3000     background-image: url(../../../images/content-types.png);
3001 }
3002 .type-video {
3003     background-position: 0px 0px;
3004 }
3005 .type-image {
3006     background-position: -20px 0;
3007 }
3008 .type-audio {
3009     background-position: -40px 0;
3010 }
3011 .type-text {
3012     background-position: -60px 0px;
3013 }
3014 .type-unkn {
3015     background-position: -80px 0;
3016 }
3017
3018
3019 /**
3020  * footer
3021  */
3022 .cc-license {
3023     margin-top: 100px;
3024     font-size: 0.7em;
3025 }
3026 footer {
3027     display: block;
3028     clear: both;
3029 }
3030 #sectionfooter {
3031     margin: 1em 0 1em 0;
3032 }
3033 #profile-jot-text {
3034     height: 20px;
3035     color: darken(@main_alt_colour, 20%);
3036     background: lighten(@main_alt_colour, 20%);
3037     .borders;
3038     .rounded_corners;
3039     width: 99.5%;
3040 }
3041
3042
3043 /**
3044  * acl
3045  */
3046 #photo-edit-perms-select,
3047 #photos-upload-permissions-wrapper,
3048 #profile-jot-acl-wrapper {
3049     display: block !important;
3050     background: @bg_colour;
3051     color: @main_colour;
3052 }
3053 #profile-jot-acl-wrapper {
3054     margin: 0 10px;
3055     .borders(1px, solid, @menu_bg_colour);
3056     border-top: 0;
3057     font-size: small;
3058     // .box_shadow;
3059 }
3060 #acl-wrapper {
3061     width: 660px;
3062     margin: 0 auto;
3063 }
3064 #acl-search {
3065     float: right;
3066     background: white url("../../../images/search_18.png") no-repeat right center;
3067     padding-right: 20px;
3068     margin: 6px;
3069     color: @main_colour;
3070 }
3071 #acl-showall {
3072     float: left;
3073     display: block;
3074     .box(auto, 18px);
3075     background: @bg_colour url("../../../images/show_all_off.png") 8px 8px no-repeat;
3076     padding: 7px 10px 7px 30px;
3077     .rounded_corners;
3078     color: @main_alt_colour;
3079     margin: 5px 0;
3080     &.selected {
3081         color: black;
3082         background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat;
3083     }
3084 }
3085 #acl-list {
3086     height: 210px;
3087     .borders(1px, solid, lighten(@main_alt_colour, 20%);
3088     clear: both;
3089     margin-top: 30px;
3090     overflow: auto;
3091 }
3092 /*#acl-list-content {
3093 }*/
3094 .acl-list-item {
3095     .borders(1px, solid, lighten(@main_alt_colour, 20%));
3096     .box(120px, 110px);
3097     display: block;
3098     float: left;
3099     margin: 3px 0 5px 5px;
3100     img {
3101         .box(22px, 22px);
3102         float: left;
3103         margin: 5px 5px 20px;
3104     }
3105     p {
3106         height: 12px;
3107         font-size: 10px;
3108         margin: 0 0 22px;
3109         padding: 2px 0 1px;
3110     }
3111     a {
3112         background: lighten(@main_alt_colour, 20%) 3px 3px no-repeat;
3113         .rounded_corners;
3114         .box(55px, 20px);
3115         clear: both;
3116         font-size: 10px;
3117         display: block;
3118         color: @main_alt_colour;
3119         margin: 5px auto 0;
3120         padding: 0 3px;
3121         text-align: center;
3122         vertical-align: middle;
3123     }
3124 }
3125 #acl-wrapper a:hover {
3126     text-decoration: none;
3127     color: @main_colour;
3128     border: 0;
3129 }
3130 //data URI:
3131 // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
3132 .acl-button-show {
3133     // background-image: url('../../../images/show_off.png');
3134     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg==');
3135     margin: 0 auto;
3136 }
3137 .acl-button-hide {
3138     // background-image: url('../../../images/hide_off.png');
3139     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII=');
3140     margin: 0 auto;
3141 }
3142 .acl-button-show.selected {
3143     // background: #9ade00 url(../../../images/show_on.png);
3144     background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII=');
3145     color: black;
3146 }
3147 .acl-button-hide.selected {
3148     // background: #ff4141 url(../../../images/hide_on.png);
3149     background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg==');
3150     color: black;
3151 }
3152 .acl-list-item {
3153     &.groupshow {
3154         border-color: @group_show;
3155     }
3156     &.grouphide {
3157         border-color: @group_hide;
3158     }
3159 }
3160 /** /acl **/
3161
3162
3163 /* autocomplete popup */
3164 .acpopup {
3165     max-height: 175px;
3166     max-width: 42%;
3167     background-color: @menu_bg_colour;
3168     color: white;
3169     overflow: auto;
3170     z-index: 100000;
3171     border: 1px solid lighten(@main_alt_colour, 20%);
3172 }
3173 .acpopupitem {
3174     background-color: @menu_bg_colour;
3175     padding: 4px;
3176     clear: left;
3177     img {
3178         float: left;
3179         margin-right: 4px;
3180     }
3181     &.selected {
3182         color: @dk_bg_colour;
3183         background-color: @bg_colour;
3184     }
3185 }
3186 .qcomment-wrapper {
3187     padding: 0px;
3188     margin: 5px 5px 5px 81%;
3189 }
3190 .qcomment {
3191     opacity: 0.5;
3192     &:hover {
3193         opacity: 1.0;
3194     }
3195 }
3196 #network-star-link {
3197     margin-top: 10px;
3198 }
3199 .network-star {
3200     float: left;
3201     margin-right: 5px;
3202     &.icon.starred {
3203         display: inline-block;
3204     }
3205 }
3206 #fileas-sidebar {}
3207
3208 .fileas-ul {
3209     padding: 0;
3210 }
3211
3212
3213 /*
3214  * addons theming
3215  */
3216 #sidebar-page-list {
3217     ul {
3218         padding: 0;
3219         margin: 5px 0;
3220     }
3221     li {
3222         list-style: none;
3223     }
3224 }
3225 #jappix_mini {
3226     margin-left: 130px;
3227     position: fixed;
3228     bottom: 0;
3229     /* override the jappix css */
3230     right: 175px !important;
3231     z-index: 999;
3232 }
3233
3234 @import "../css/media";