view/theme/dispy/dark/style.less

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