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,
1740 .contact-entry-wrapper {
1741         float: left;
1742         margin: 0 5px 40px 0;
1743         .box(120px, 135px);
1744         padding: 3px;
1745         position: relative;
1746 }
1747 .contact-direction-wrapper {
1748         position: absolute;
1749         top: 20px;
1750 }
1751 .contact-edit-links {
1752         position: absolute;
1753         top: 60px;
1754 }
1755 .contact-entry-photo-wrapper {}
1756
1757 .contact-entry-photo {
1758         margin-left: 20px;
1759 }
1760 .contact-entry-name {
1761         width: 120px;
1762         font-weight: bold;
1763         font-size: small;
1764 }
1765 .contact-entry-details {
1766         font-size: x-small;
1767 }
1768 .contact-entry-photo {
1769         position: relative;
1770 }
1771 .contact-entry-edit-links .icon {
1772         .borders(1px, solid, #babdb6);
1773         .rounded_corners(3px);
1774         background-color: white;
1775 }
1776 #contact-entry-url,
1777 [id^="contact-entry-url"],
1778 #contact-entry-network,
1779 [id^="contact-entry-network"] {
1780         font-size: smaller;
1781 }
1782 #contact-entry-network,
1783 [id^="contact-entry-network"] {
1784         font-style: italic;
1785 }
1786 #contact-edit-banner-name {
1787         font-size: 1.5em;
1788 }
1789
1790 #contact-edit-photo-wrapper {
1791         position: relative;
1792         float: left;
1793         padding: 20px;
1794 }
1795 #contact-edit-direction-icon {
1796         position: absolute;
1797         top: 60px;
1798         left: 0;
1799 }
1800 #contact-edit-nav-wrapper {
1801         margin-left: 0px;
1802 }
1803 #contact-edit-links {
1804         margin-top: 23px;
1805 }
1806 #contact-drop-links {
1807         margin-left: 5px;
1808 }
1809 #contact-edit-nav-wrapper .icon {
1810         .borders(1px, solid, #babdb6);
1811         .rounded_corners(3px);
1812 }
1813 #contact-edit-poll-wrapper {
1814         margin-left: 0px;
1815 }
1816 #contact-edit-last-update-text {
1817         margin-bottom: 15px;
1818 }
1819 #contact-edit-last-updated {
1820         font-weight: bold;
1821 }
1822 #contact-edit-poll-text {
1823         display: inline;
1824 }
1825 #contact-edit-info_tbl,
1826 #contact-edit-info_parent,
1827 .mceLayout {
1828         width: 100%; }
1829 #contact-edit-end {
1830         clear: both;
1831         margin-bottom: 65px;
1832 }
1833 .contact-photo-menu-button {
1834         position: absolute;
1835         background: url("dark/photo-menu.jpg") top left no-repeat transparent;
1836         margin: 0px;
1837         padding: 0px;
1838         .box(16px, 16px);
1839         top: 64px;
1840         left: 0px;
1841         overflow: hidden;
1842         text-indent: 40px;
1843         display: none;
1844 }
1845 .contact-photo-menu {
1846         width: auto;
1847         .borders(2px, solid, darken(@main_alt_colour, 66.5%));
1848         background: @bg_colour;
1849         color: @main_colour;
1850         position: absolute;
1851         left: 0px;
1852         top: 90px;
1853         display: none;
1854         z-index: 10000;
1855         li a {
1856                 display: block;
1857                 padding: 2px;
1858                 &:hover {
1859                         color: white;
1860                         background: #3465A4;
1861                         text-decoration: none;
1862                 }
1863         }
1864 }
1865
1866
1867 /**
1868  * register, settings & profile forms
1869  */
1870 .openid {}
1871
1872 #id_openid_url {
1873         background: url(dark/login-bg.gif) no-repeat;
1874         background-position: 0 50%;
1875         padding-left: 18px;
1876 }
1877 #settings-nickname-desc {
1878         background-color: @main_colour;
1879         .rounded_corners;
1880         padding: 5px;
1881         color: @shadow_colour;
1882 }
1883 #settings-default-perms {
1884         margin-bottom: 20px;
1885 }
1886 #register-form div, #profile-edit-form div {
1887         clear: both;
1888 }
1889 .settings-block {
1890         label {
1891                 clear: left;
1892         }
1893         input {
1894                 margin: 10px 5px;
1895         }
1896 }
1897 #register-form label,
1898 #profile-edit-form label {
1899     width: 300px;
1900     float: left;
1901 }
1902 #register-form span,
1903 #profile-edit-form span {
1904     color: @menu_bg_colour;
1905     display: block;
1906     margin-bottom: 20px;
1907 }
1908 #profile-edit-marital-label span {
1909         margin: -4px;
1910 }
1911 .settings-submit-wrapper, .profile-edit-submit-wrapper {
1912         margin: 0 0 30px -3px;
1913 }
1914 .profile-edit-side-div {
1915         display: none;
1916 }
1917 /*.profile-edit-side-div:hover {
1918     display: block;
1919 }
1920 .profile-edit-side-link {
1921     margin: 3px 0px 0px 70px;
1922 }*/
1923
1924 #profiles-menu-trigger {
1925         margin: 0px 0px 0px 25px;
1926 }
1927 .profile-listing {
1928         float: left;
1929         margin: 20px 20px 0px 0px;
1930 }
1931 .icon-profile-edit {
1932         background: url("dark/icons.png") -150px 0px no-repeat;
1933         border: 0;
1934         cursor: pointer;
1935         display: block;
1936         .box(20px, 20px);
1937         margin: 0 0 -18px;
1938         text-decoration: none;
1939         top: 113px;
1940         right: 260px;
1941 }
1942 #profile-edit-links ul {
1943         .list_reset;
1944         margin: 20px 0;
1945 }
1946 .marital {
1947         margin-top: 5px;
1948 }
1949 #register-sitename {
1950         display: inline;
1951         font-weight: bold;
1952 }
1953 #advanced-expire-popup {
1954         background: @bg_colour;
1955         color: @main_colour;
1956 }
1957 #id_ssl_policy {
1958         width: 374px;
1959 }
1960 #theme-preview img {
1961         margin: 10px 10px 10px 288px;
1962 }
1963
1964
1965 /**
1966  * contacts selector
1967  */
1968 .group-delete-wrapper {
1969         margin: -31px 50px 0 0;
1970         float: right;
1971 }
1972 /*.group-delete-icon {
1973     margin: 0 0 0 10px;
1974 }*/
1975 #group-edit-submit-wrapper {
1976         margin: 0 0 10px 0;
1977         display: inline;
1978 }
1979 #group-edit-desc {
1980         margin: 10px 0px;
1981 }
1982 #group-members, #prof-members {
1983         height: 200px;
1984         overflow: auto;
1985         .borders(1px, solid, #555753);
1986         .rounded_corners(5px 5px 0 0);
1987 }
1988 #group-all-contacts, #prof-all-contacts {
1989         height: 200px;
1990         overflow: auto;
1991         .borders(1px, solid, #555753);
1992         .rounded_corners(0 0 5px 5px);
1993 }
1994 #group-members h3,
1995 #group-all-contacts h3,
1996 #prof-members h3,
1997 #prof-all-contacts h3 {
1998         color: @main_alt_colour;
1999         background-color: #555753;
2000         margin: 0;
2001         padding: 5px;
2002 }
2003 #group-separator, #prof-separator {
2004         display: none;
2005 }
2006
2007
2008 /**
2009  * profile
2010  */
2011 #cropimage-wrapper {
2012         float: left;
2013 }
2014 #crop-image-form {
2015         clear: both;
2016 }
2017
2018
2019 /**
2020  * intros
2021  */
2022 .intro-wrapper {
2023         margin-top: 20px;
2024 }
2025 .intro-fullname {
2026         font-size: 1.1em;
2027         font-weight: bold;
2028 }
2029 .intro-desc {
2030         margin-bottom: 20px;
2031         font-weight: bold;
2032 }
2033 .intro-note {
2034         padding: 10px;
2035 }
2036 .intro-end {
2037         padding: 30px;
2038 }
2039 .intro-form {
2040         float: left;
2041 }
2042 .intro-approve-form,
2043 .intro-approve-as-friend-end {
2044         clear: both;
2045 }
2046 .intro-submit-approve, .intro-submit-ignore {
2047         margin-right: 20px;
2048 }
2049 .intro-submit-approve {
2050         margin-top: 15px;
2051 }
2052 .intro-approve-as-friend-label,
2053 .intro-approve-as-fan-label,
2054 .intro-approve-as-friend,
2055 .intro-approve-as-fan {
2056         float: left;
2057 }
2058 .intro-form-end {
2059         clear: both;
2060         margin-bottom: 10px;
2061 }
2062 .intro-approve-as-friend-desc {
2063         margin-top: 10px;
2064 }
2065 .intro-approve-as-end {
2066         clear: both;
2067         margin-bottom: 10px;
2068 }
2069 .intro-end, .clear {
2070         clear: both;
2071 }
2072
2073
2074 /**
2075  * events
2076  */
2077 .eventcal {
2078         float: left;
2079         font-size: 20px;
2080 }
2081 .event {
2082         background: @bg_colour;
2083 }
2084 .vevent {
2085         border: 1px solid darken(@main_alt_colour, 13.5%);
2086         .event-description, .event-location, .event-start {
2087                 margin-left: 10px;
2088                 margin-right: 10px;
2089         }
2090 }
2091 #new-event-link {
2092         margin-bottom: 10px;
2093 }
2094 .edit-event-link, .plink-event-link {
2095   /*float: left;      */
2096   /*margin-top: 4px;  */
2097   /*margin-right: 4px;*/
2098   /*margin-bottom: 15px;*/
2099 }
2100 .event-description:before {
2101         content: url('../../../images/calendar.png');
2102         margin-right: 15px;
2103 }
2104 .event-start,
2105 .event-end {
2106         margin-left: 10px;
2107         width: 330px;
2108         font-size: smaller;
2109 }
2110 .event-start .dtstart,
2111 .event-end .dtend {
2112         float: right;
2113 }
2114 .event-list-date {
2115         margin-bottom: 10px;
2116 }
2117 .prevcal, .nextcal {
2118         float: left;
2119         margin: 64px 32px auto 32px;
2120 }
2121 .calendar {
2122         font-family: monospace;
2123 }
2124 .today {
2125         font-weight: bold;
2126         color: red;
2127 }
2128 #event-start-text, #event-finish-text {
2129         margin-top: 10px;
2130         margin-bottom: 5px;
2131 }
2132 #event-nofinish-checkbox,
2133 #event-nofinish-text,
2134 #event-adjust-checkbox,
2135 #event-adjust-text,
2136 #event-share-checkbox {
2137         float: left;
2138 }
2139 #event-datetime-break {
2140         margin-bottom: 10px;
2141 }
2142 #event-nofinish-break,
2143 #event-adjust-break,
2144 #event-share-break {
2145         clear: both;
2146 }
2147 #event-desc-text, #event-location-text {
2148         margin-top: 10px;
2149         margin-bottom: 5px;
2150 }
2151 #event-submit {
2152         margin-top: 10px;
2153 }
2154 .body-tag {
2155         margin: 10px 0;
2156         opacity: 0.5;
2157         &:hover {
2158                 opacity: 1.0 !important;
2159         }
2160 }
2161 .filesavetags, .categorytags {
2162         margin: 20px 0;
2163         opacity: 0.5;
2164 }
2165 .filesavetags:hover, .categorytags:hover {
2166         margin: 20px 0;
2167         opacity: 1.0 !important;
2168 }
2169 .item-select {
2170         opacity: 0.1;
2171         margin: 5px 0 0 6px !important;
2172         &:hover {
2173                 opacity: 1;
2174         }
2175 }
2176 .checkeditem {
2177         opacity: 1;
2178 }
2179 #item-delete-selected {
2180         margin-top: 30px;
2181 }
2182 /* was tired of having no way of moving it around, so
2183 * here's a little 'hook' to do so */
2184 .delete-checked {
2185         position: absolute;
2186         left: 35px;
2187         margin-top: 20px;
2188 }
2189 #item-delete-selected-icon {
2190         float: left;
2191         margin-right: 5px;
2192 }
2193 #item-delete-selected-desc {
2194         float: left;
2195         margin-right: 5px;
2196         &:hover {
2197                 text-decoration: underline;
2198         }
2199 }
2200 .fc-state-highlight {
2201         background: @main_colour;
2202         color: @bg_colour;
2203 }
2204
2205
2206 /**
2207  * directory
2208  */
2209 .directory-item {
2210         float: left;
2211         margin: 0 5px 4px 0;
2212         padding: 3px;
2213         width: 180px;
2214         height: 250px;
2215         position: relative;
2216 }
2217
2218
2219 /**
2220  * sidebar
2221  */
2222 #group-sidebar {
2223         margin-bottom: 10px;
2224 }
2225 .group-selected,
2226 .nets-selected,
2227 .fileas-selected {
2228         padding: 3px;
2229         color: @bg_colour;
2230         background: @main_colour;
2231         font-weight: bold;
2232 }
2233 .group-selected:hover,
2234 .nets-selected:hover,
2235 .fileas-selected:hover {
2236         color: @link_colour;
2237         background: @bg_colour;
2238 }
2239 .groupsideedit {
2240         margin-right: 10px;
2241 }
2242 #sidebar-group-ul {
2243         padding-left: 0;
2244 }
2245 #sidebar-group-list {
2246         margin: 0 0 5px 0;
2247         li {
2248                 margin-top: 10px;
2249         }
2250         .icon {
2251                 display: inline-block;
2252                 .box(12px, 12px);
2253         }
2254 }
2255 .sidebar-group-element {
2256         padding: 3px;
2257         &:hover {
2258                 color: @bg_colour;
2259                 background: @link_colour;
2260                 font-weight: bold;
2261                 padding: 3px;
2262         }
2263 }
2264 #sidebar-new-group {
2265         margin: auto;
2266         display: inline-block;
2267         color: @main_alt_colour;
2268         text-decoration: none;
2269         text-align: center;
2270 }
2271 #peoplefind-sidebar form {
2272         margin-bottom: 10px;
2273 }
2274 #sidebar-new-group {
2275         &:hover {
2276                 /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
2277                 /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
2278                 /*background-color: #b20202;*/ }
2279         &:active {
2280                 position: relative;
2281                 top: 1px;
2282         }
2283 }
2284 #side-peoplefind-url {
2285         background-color: @bg_colour;
2286         color: @main_colour;
2287         .borders(1px, solid, darken(@main_alt_colour, 33.5%));
2288         margin-right: 3px;
2289         width: 75%;
2290         &:hover, &:focus {
2291                 background-color: @main_alt_colour;
2292                 color: darken(@main_alt_colour, 80%);
2293                 .borders(1px, solid, darken(@main_alt_colour, 73.5%));
2294         }
2295 }
2296 .nets-ul {
2297         .list_reset;
2298         li {
2299                 margin: 10px 0 0;
2300         }
2301 }
2302 .nets-link, .nets-all {
2303         margin-left: 0px;
2304 }
2305 #netsearch-box {
2306         margin: 20px 0px 30px;
2307         width: 135px;
2308         #search-submit {
2309                 margin: 5px 5px 0px 0px;
2310         }
2311 }
2312
2313
2314 /**
2315  * admin
2316  */
2317 #pending-update {
2318         float: right;
2319         color: white;
2320         font-weight: bold;
2321         background-color: red;
2322         padding: 0 0.3em;
2323 }
2324 .admin {
2325         &.linklist {
2326                 border: 0;
2327                 padding: 0;
2328         }
2329         &.link {
2330                 .list_reset;
2331         }
2332 }
2333 #adminpage {
2334         color: @main_colour;
2335         background: @bg_colour;
2336         margin: 5px;
2337         padding: 10px;
2338         dl {
2339             clear: left;
2340                 margin-bottom: 2px;
2341                 padding-bottom: 2px;
2342                 border-bottom: 1px solid @shadow_colour;
2343         }
2344         dt {
2345                 width: 250px;
2346                 float: left;
2347                 font-weight: bold;
2348         }
2349         dd {
2350                 margin-left: 250px;
2351         }
2352         h3 {
2353                 border-bottom: 1px solid darken(@main_alt_colour, 13.5%);
2354         }
2355         .submit {
2356                 clear: left;
2357         }
2358         #pluginslist {
2359                 margin: 0;
2360                 padding: 0;
2361         }
2362         .plugin {
2363                 display: block;
2364                 .borders(1px, solid, darken(@main_alt_colour, 40%));
2365                 padding: 1em;
2366                 margin-bottom: 5px;
2367                 clear: left;
2368         }
2369         .toggleplugin {
2370                 float: left;
2371                 margin-right: 1em;
2372         }
2373         table {
2374                 width: 100%;
2375                 border-bottom: 1px solid @shadow_colour;
2376                 margin: 5px 0;
2377                 th {
2378                         text-align: left;
2379                 }
2380         }
2381         td .icon {
2382                 float: left;
2383         }
2384         table {
2385                 &#users img {
2386                         .box(16px, 16px);
2387                 }
2388         }
2389         .selectall {
2390                 text-align: right;
2391         }
2392         #users a {
2393                 color: @main_colour;
2394                 text-decoration: underline;
2395         }
2396 }
2397 #users .name {
2398         color: @main_colour;
2399 }
2400
2401
2402 /**
2403  * form fields
2404  */
2405 .field {
2406         overflow: auto;
2407         label {
2408                 width: 38%;
2409                 display: inline-block;
2410                 margin: 0 10px 1em 0;
2411                 border: 1px @bg_colour solid;
2412                 padding: 5px;
2413                 background: @main_colour;
2414                 color: #111;
2415         }
2416 }
2417 .field .onoff {
2418         float: right;
2419         margin: 0 330px 0 auto;
2420         width: 80px;
2421         a {
2422                 display: block;
2423                 .borders(1px, solid, darken(@main_alt_colour, 53.5%));
2424                 padding: 3px 6px 4px 10px;
2425                 height: 16px;
2426                 text-decoration: none;
2427         }
2428         .on, .off {
2429                 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==');
2430                 background-repeat: no-repeat;
2431         }
2432         .on {
2433                 background-position: 42px 1px;
2434                 background-color: darken(@main_alt_colour, 33.5%);
2435                 color: darken(@main_alt_colour, 86.5%);
2436                 text-align: left;
2437         }
2438         .off {
2439                 background-position: 2px 1px;
2440                 background-color: darken(@main_alt_colour, 13.5%);
2441                 color: darken(@main_alt_colour, 73.5%);
2442                 text-align: right;
2443         }
2444 }
2445 .hidden {
2446         display: none !important;
2447 }
2448 .field textarea {
2449         .box(80%, 100px);
2450 }
2451 .field_help {
2452         display: block;
2453         margin-left: 297px;
2454         color: darken(@main_alt_colour, 24%);
2455 }
2456 .field.radio .field_help {
2457         margin-left: 297px;
2458 }
2459
2460
2461 /*
2462  * update
2463  */
2464 .popup {
2465         .box(100%, 100%);
2466         top: 0px;
2467         left: 0px;
2468         position: absolute;
2469         display: none;
2470         .background {
2471                 background-color: darken(@main_alt_colour, 86.5%);
2472                 opacity: 0.5;
2473                 .box(100%, 100%);
2474                 position: absolute;
2475                 top: 0px;
2476                 left: 0px;
2477         }
2478         .panel {
2479                 top: 25%;
2480                 left: 25%;
2481                 .box(50%, 50%);
2482                 padding: 1em;
2483                 position: absolute;
2484                 .borders(4px, solid, black);
2485                 background-color: white;
2486         }
2487 }
2488 #panel {
2489         z-index: 100;
2490 }
2491 .grey, .gray {
2492         color: gray;
2493 }
2494 .orange {
2495         color: orange;
2496 }
2497 .red {
2498         color: red;
2499 }
2500 .popup .panel {
2501         .panel_text {
2502                 display: block;
2503                 overflow: auto;
2504                 height: 80%;
2505         }
2506         .panel_in {
2507                 .box(100%, 100%);
2508                 position: relative;
2509         }
2510         .panel_actions {
2511                 width: 100%;
2512                 bottom: 4px;
2513                 left: 0px;
2514                 position: absolute;
2515         }
2516 }
2517 .panel_text .progress {
2518         width: 50%;
2519         overflow: hidden;
2520         height: auto;
2521         .borders(1px, solid, darken(@main_alt_colour, 13.5%));
2522         margin-bottom: 5px;
2523         span {
2524                 float: right;
2525                 display: block;
2526                 width: 25%;
2527                 background-color: @main_alt_colour;
2528                 text-align: right;
2529         }
2530 }
2531
2532
2533 /**
2534  * OAuth
2535  */
2536 .oauthapp {
2537         height: auto;
2538         overflow: auto;
2539         border-bottom: 2px solid darken(@main_alt_colour, 13.5%);
2540         padding-bottom: 1em;
2541         margin-bottom: 1em;
2542         img {
2543                 float: left;
2544                 .box(48px, 48px);
2545                 margin: 10px;
2546                 &.noicon {
2547                         background-image: url("../../../images/icons/48/plugin.png");
2548                         background-position: center center;
2549                         background-repeat: no-repeat;
2550                 }
2551         }
2552         a {
2553                 float: left;
2554         }
2555 }
2556
2557
2558 /**
2559  * icons
2560  */
2561 .iconspacer {
2562         display: block;
2563         .box(16px, 16px);
2564 }
2565 .icon {
2566         display: block;
2567         .box;
2568         background: url(dark/icons.png) no-repeat;
2569         border: 0;
2570         text-decoration: none;
2571         .rounded_corners;
2572         &:hover {
2573                 border: 0;
2574                 text-decoration: none;
2575         }
2576 }
2577 .editicon {
2578         display: inline-block;
2579         .box(21px, 21px);
2580         background: url(dark/editicons.png) no-repeat;
2581         border: 0;
2582         text-decoration: none;
2583 }
2584 .shadow {
2585         .box_shadow(2px, 2px, 5px, 2px);
2586         &:active, &:focus, &:hover {
2587                 .box_shadow(0, 0, 0, 0);
2588         }
2589 }
2590 .editicon:hover {
2591         border: 0;
2592 }
2593 .boldbb {
2594         background-position: 0px 0px;
2595         &:hover {
2596                 background-position: -22px 0px; }
2597 }
2598 .italicbb {
2599         background-position: 0px -22px;
2600         &:hover {
2601                 background-position: -22px -22px; }
2602 }
2603 .underlinebb {
2604         background-position: 0px -44px;
2605         &:hover {
2606                 background-position: -22px -44px; }
2607 }
2608 .quotebb {
2609         background-position: 0px -66px;
2610         &:hover {
2611                 background-position: -22px -66px; }
2612 }
2613 .codebb {
2614         background-position: 0px -88px;
2615         &:hover {
2616                 background-position: -22px -88px; }
2617 }
2618 .imagebb {
2619         background-position: -44px 0px;
2620         &:hover {
2621                 background-position: -66px 0px; }
2622 }
2623 .urlbb {
2624         background-position: -44px -22px;
2625         &:hover {
2626                 background-position: -66px -22px; }
2627 }
2628 .videobb {
2629         background-position: -44px -44px;
2630         &:hover {
2631                 background-position: -66px -44px; }
2632 }
2633 .icon {
2634         &.drop, &.drophide, &.delete {
2635                 float: left;
2636                 margin: 0 2px;
2637         }
2638         &.s22 {
2639                 &.delete {
2640                         display: block;
2641                         background-position: -110px 0;
2642                 }
2643                 &.text {
2644                         padding: 10px 0px 0px 25px;
2645                         width: 200px;
2646                 }
2647         }
2648         &.text {
2649                 text-indent: 0px;
2650         }
2651         &.s16 {
2652                 min-width: 16px;
2653                 height: 16px;
2654         }
2655 }
2656 // special case for wall items
2657 .wall-item-delete-wrapper.icon.delete,
2658 .wall-item-delete-wrapper.icon.drophide {
2659         margin: 0;
2660 }
2661 .s16 .add {
2662         background: url("../../../images/icons/16/add.png") no-repeat;
2663 }
2664 .add {
2665         margin: 0px 5px;
2666 }
2667 .article {
2668         background-position: -50px 0;
2669 }
2670 .audio {
2671         background-position: -70px 0;
2672 }
2673 .block {
2674         background-position: -90px 0px;
2675 }
2676 .drop, .delete {
2677         background-position: -110px 0;
2678 }
2679 .drophide {
2680         background-position: -130px 0;
2681 }
2682 .edit {
2683         background-position: -150px 0;
2684 }
2685 .camera {
2686         background-position: -170px 0;
2687 }
2688 .dislike {
2689         background-position: -190px 0;
2690 }
2691 .file-as {
2692         background-position: -230px -60px;
2693 }
2694 .like {
2695         background-position: -211px 0;
2696 }
2697 .link {
2698         background-position: -230px 0;
2699 }
2700 .globe,
2701 .location {
2702         background-position: -50px -20px;
2703 }
2704 .noglobe,
2705 .nolocation {
2706         background-position: -70px -20px;
2707 }
2708 .no {
2709         background-position: -90px -20px;
2710 }
2711 .pause {
2712         background-position: -110px -20px;
2713 }
2714 .play {
2715         background-position: -130px -20px;
2716 }
2717 .pencil {
2718         background-position: -151px -18px;
2719 }
2720 .small-pencil {
2721         background-position: -170px -20px;
2722 }
2723 .recycle {
2724         background-position: -190px -20px;
2725 }
2726 .remote-link {
2727         background-position: -210px -20px;
2728 }
2729 .share {
2730         background-position: -230px -20px;
2731 }
2732 .tools {
2733         background-position: -50px -40px;
2734 }
2735 .lock {
2736         background-position: -70px -40px;
2737 }
2738 .unlock {
2739         background-position: -88px -40px;
2740 }
2741 .video {
2742         background-position: -110px -40px;
2743 }
2744 .attach {
2745         background-position: -190px -40px;
2746 }
2747 .language {
2748         background-position: -210px -40px;
2749 }
2750 .starred {
2751         background-position: -130px -60px;
2752 }
2753 .unstarred {
2754         background-position: -150px -60px;
2755 }
2756 .tagged {
2757         background-position: -170px -60px;
2758 }
2759 .on {
2760         background-position: -50px -60px;
2761 }
2762 .off {
2763         background-position: -70px -60px;
2764 }
2765 .prev {
2766         background-position: -90px -60px;
2767 }
2768 .next {
2769         background-position: -110px -60px;
2770 }
2771 .icon.dim {
2772         opacity: 0.3;
2773 }
2774 #pause {
2775         position: fixed;
2776         bottom: 40px;
2777         right: 30px;
2778 }
2779 .border {
2780         .borders(1px, solid, @border2);
2781         .rounded_corners;
2782         &:hover {
2783                 .borders(1px, solid, @border2);
2784                 .rounded_corners;
2785         }
2786 }
2787 .attachtype {
2788         display: block;
2789         .box(20px, 23px);
2790         background-image: url(../../../images/content-types.png);
2791 }
2792 .type-video {
2793         background-position: 0px 0px;
2794 }
2795 .type-image {
2796         background-position: -20px 0;
2797 }
2798 .type-audio {
2799         background-position: -40px 0;
2800 }
2801 .type-text {
2802         background-position: -60px 0px;
2803 }
2804 .type-unkn {
2805         background-position: -80px 0;
2806 }
2807
2808
2809 /**
2810  * footer
2811  */
2812 .cc-license {
2813         margin-top: 100px;
2814         font-size: 0.7em;
2815 }
2816 footer {
2817         display: block;
2818         clear: both;
2819 }
2820 #profile-jot-text {
2821         height: 20px;
2822         color: @main_colour;
2823         .borders;
2824         .rounded_corners;
2825         width: 99.5%;
2826 }
2827
2828
2829 /**
2830  * acl
2831  */
2832 #photo-edit-perms-select,
2833 #photos-upload-permissions-wrapper,
2834 #profile-jot-acl-wrapper {
2835         display: block !important;
2836         background: @bg_colour;
2837         color: @main_colour;
2838 }
2839 #profile-jot-acl-wrapper {
2840         margin: 0 10px;
2841         .borders(1px, solid, @menu_bg_colour);
2842         border-top: 0;
2843         // .box_shadow;
2844 }
2845 #acl-wrapper {
2846         width: 660px;
2847         margin: 0 auto;
2848 }
2849 #acl-search {
2850         float: right;
2851         background: white url("../../../images/search_18.png") no-repeat right center;
2852         padding-right: 20px;
2853         margin: 6px;
2854         color: @shadow_colour;
2855 }
2856 #acl-showall {
2857         float: left;
2858         display: block;
2859         .box(auto, 18px);
2860         background: @main_colour url("../../../images/show_all_off.png") 8px 8px no-repeat;
2861         padding: 7px 10px 7px 30px;
2862         .rounded_corners;
2863         color: darken(@main_alt_colour, 33.5%);
2864         margin: 5px 0;
2865         &.selected {
2866                 color: black;
2867                 background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat;
2868         }
2869 }
2870 #acl-list {
2871         height: 210px;
2872         .borders(1px, solid, darken(@main_alt_colour, 13.5%);
2873         clear: both;
2874         margin-top: 30px;
2875         overflow: auto;
2876 }
2877 /*#acl-list-content {
2878 }*/
2879 .acl-list-item {
2880         .borders;
2881         .box(120px, 110px);
2882         display: block;
2883         float: left;
2884         margin: 3px 0 5px 5px;
2885         img {
2886                 .box(22px, 22px);
2887                 float: left;
2888                 margin: 5px 5px 20px;
2889         }
2890         p {
2891                 height: 12px;
2892                 font-size: 10px;
2893                 margin: 0 0 22px;
2894                 padding: 2px 0 1px;
2895         }
2896         a {
2897                 background: @main_colour 3px 3px no-repeat;
2898                 .rounded_corners;
2899                 .box(55px, 20px);
2900                 clear: both;
2901                 font-size: 10px;
2902                 display: block;
2903                 color: @bg_colour;
2904                 margin: 5px auto 0;
2905                 padding: 0 3px;
2906                 text-align: center;
2907                 vertical-align: middle;
2908         }
2909 }
2910 #acl-wrapper a:hover {
2911         text-decoration: none;
2912         color: @bg_colour;
2913         border: 0;
2914 }
2915 //data URI:
2916 // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
2917 .acl-button-show {
2918         // background-image: url('../../../images/show_off.png');
2919         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg==');
2920         margin: 0 auto;
2921 }
2922 .acl-button-hide {
2923         // background-image: url('../../../images/hide_off.png');
2924         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII=');
2925         margin: 0 auto;
2926 }
2927 .acl-button-show.selected {
2928         // background: #9ade00 url(../../../images/show_on.png);
2929         background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII=');
2930         color: @bg_colour;
2931 }
2932 .acl-button-hide.selected {
2933         // background: #ff4141 url(../../../images/hide_on.png);
2934         background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg==');
2935         color: @bg_colour;
2936 }
2937 .acl-list-item {
2938         &.groupshow {
2939                 border-color: @group_show;
2940         }
2941         &.grouphide {
2942                 border-color: @group_hide;
2943         }
2944 }
2945 /** /acl **/
2946
2947
2948 /* autocomplete popup */
2949 .acpopup {
2950         max-height: 175px;
2951         max-width: 42%;
2952         background-color: @menu_bg_colour;
2953         color: white;
2954         overflow: auto;
2955         z-index: 100000;
2956         border: 1px solid darken(@main_alt_colour, 13.5%);
2957 }
2958 .acpopupitem {
2959         background-color: @menu_bg_colour;
2960         padding: 4px;
2961         clear: left;
2962         img {
2963                 float: left;
2964                 margin-right: 4px;
2965         }
2966         &.selected {
2967                 color: @bg_alt_colour;
2968                 background-color: @main_alt_colour;
2969         }
2970 }
2971 .qcomment-wrapper {
2972         padding: 0px;
2973         margin: 5px 5px 5px 81%;
2974 }
2975 .qcomment {
2976         opacity: 0.5;
2977         &:hover {
2978                 opacity: 1.0;
2979         }
2980 }
2981 #network-star-link {
2982         margin-top: 10px;
2983 }
2984 .network-star {
2985         float: left;
2986         margin-right: 5px;
2987         &.icon.starred {
2988                 display: inline-block;
2989         }
2990 }
2991 #fileas-sidebar {}
2992
2993 .fileas-ul {
2994         padding: 0;
2995 }
2996
2997
2998 /*
2999  * addons theming
3000  */
3001 #sidebar-page-list {
3002         ul {
3003                 padding: 0;
3004                 margin: 5px 0;
3005         }
3006         li {
3007                 list-style: none;
3008         }
3009 }
3010 #jappix_mini {
3011         margin-left: 130px;
3012         position: fixed;
3013         bottom: 0;
3014         /* override the jappix css */
3015         right: 175px !important;
3016         z-index: 999;
3017 }
3018
3019 @import "../css/media";