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