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