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