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