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