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